Javascript 如何将多个表单数据发布到PHP_Javascript_Php

Javascript 如何将多个表单数据发布到PHP

javascript php

Javascript 如何将多个表单数据发布到PHP,javascript,php,Javascript,Php,我试图将表单中的数据发送到php中，然后将其写入html，而无需加载到php文件页面。var_dump显示数据已经准备好了，它只是不想传递给php <!DOCTYPE html> <html lang="en"> <head> <title>TEST</title> <meta charset="UTF-8" content="bla bla bla"> <script type="text/javascript" s

我试图将表单中的数据发送到php中，然后将其写入html，而无需加载到php文件页面。var_dump显示数据已经准备好了，它只是不想传递给php

<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST</title>
<meta charset="UTF-8" content="bla bla bla">
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" language="javascript">$(function(){$('body').on('click', 'input.sumbit', function(){gogosend();});});</script>
</head>
<body>

    <form method="post">
            <ul class="form">               
                <li class="short">
                    <label>First Name<span class="required"></span></label>
                    <input type="text" name="first" id="first"/>
                </li>

                <li class="short">
                    <label>Last Name<span class="required"></span></label>
                    <input type="text" name="last" id="last" />
                </li>

                <li class="long">
                    <label>Email Address<span class="required"></span></label>                  
                    <input type="text" name="email" id="email"/>
                </li>

                <li class="short">
                    <label>Company Name</label>
                    <input type="text" name="company" id="company"/>
                </li>

                <li class="short">
                    <label>Telephone Number</label>
                    <input type="text" name="phone" id="phone" />
                </li>

                <li class="textarea">
                    <label>Message<span class="required"></span></label>
                    <textarea name="message" id="message" rows="20" cols="30"></textarea>
                </li>

                <li class="button">
                    <input class="sumbit" name="sumbit" id="sumbit" value="Submit" type="submit" />
                </li>
    </form>
<script>
function gogosend()

{
var dfirs = document.getElementById("first").value;
var dlast = document.getElementById("last").value;
var demai = document.getElementById("email").value;
var dcomp = document.getElementById("company").value;
var dphon = document.getElementById("phone").value;
var dmess = document.getElementById("message").value;

alert(dfirs);

var xhr;
 if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var data_first = "first=" +dfirs ;
var data_last = "last=" +dlast ;
var data_email = "email=" +demai ;
var data_company = "company=" +dcomp ;
var data_phone = "phone=" +dphon ;
var data_message = "message=" +dmess ;

alert(data_first);

     xhr.open("POST", "mailer.php", true);
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

     xhr.send(data_first);
     xhr.send(data_last);
     xhr.send(data_email);
     xhr.send(data_company);
     xhr.send(data_phone);
     xhr.send(data_message);
}
</script>

<?php
var_dump($_POST);
echo "</br>";
?>

</body>
</html>

我试过了，但没用。

我建议发送一个从表单中提取的JSON对象，供PHP脚本访问。。。在PHP脚本中，使用此函数从此JSON创建PHP类实例或索引数组

要在javascript客户端将表单序列化为JSON，可以使用

如果我可以给你一个建议，跳过直接使用xhr。。。使用jQueryAjax包装器。。。它将确保以相同的方式在所有主要浏览器上运行，而不会带来麻烦

您只需根据

应用程序/x-www-form-urlencoded

格式化这些数据即可

function gogosend()

{
var dfirs = document.getElementById("first").value;
var dlast = document.getElementById("last").value;
var demai = document.getElementById("email").value;
var dcomp = document.getElementById("company").value;
var dphon = document.getElementById("phone").value;
var dmess = document.getElementById("message").value;

alert(dfirs);

var xhr;
 if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

var data_first = "first=" +dfirs ;
var data_last = "last=" +dlast ;
var data_email = "email=" +demai ;
var data_company = "company=" +dcomp ;
var data_phone = "phone=" +dphon ;
var data_message = "message=" +dmess ;

var data = ([data_first, data_last, data_email, data_company, data_phone, data_message]).join('&');

alert(data_first);

     xhr.open("POST", "mailer.php", true);
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     xhr.setRequestHeader("Content-length", data.length);

     xhr.send(data);
}

就像添加一个返回错误一样简单；到您的gogosend函数

（表单提交要求返回false；最后，为了留在页面上，顺便说一句，数据已提交到mailer.php）

瞧：）

您需要发送一个包含数据的数组。示例

xhr.send（“fname=Henry&lname=Ford”）@S.维瑟：是的，我明白了。。。但是我需要修改我的php代码来读取该数组吗？你不能将数据发送到php脚本，jQuery不支持所有浏览器，它支持大多数浏览器，而更高版本只支持更新的。php是一种脚本语言。在这种情况下，表单通过HTTP将数据发送到web服务器。脚本可以访问web服务器允许它访问的数据。文字很重要，这就是我们使用它们的原因。你可以和我争论，但这并没有什么作用，因为我只是在发表评论，我真的不在乎；或者只需将您的措辞从更改为PHP脚本
到PHP脚本

访问的

。谢谢@Krab:但是我的PHP代码呢，我是否需要编辑它以接收上述数组？好的，我像上面那样更改了它，但我的.html输出文件保持不变empty@jeanna.b：因此，在浏览器开发工具中检查实际发送到服务器的内容谢谢@Krab:）诀窍是我需要将input type=“submit”
更改为input type=“button”
，并删除method=“POST”。这是保存的文档上的数据：
array (size=7)
  'first' => string '24' (length=2)
  'last' => string '225' (length=3)
  'email' => string '25g2' (length=4)
  'company' => string '2d5' (length=3)
  'phone' => string '2d5' (length=3)
  'message' => string '2d5' (length=3)
  'sumbit' => string 'Submit' (length=6)

function gogosend()

{
var dfirs = document.getElementById("first").value;
var dlast = document.getElementById("last").value;
var demai = document.getElementById("email").value;
var dcomp = document.getElementById("company").value;
var dphon = document.getElementById("phone").value;
var dmess = document.getElementById("message").value;

alert(dfirs);

var xhr;
 if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

var data_first = "first=" +dfirs ;
var data_last = "last=" +dlast ;
var data_email = "email=" +demai ;
var data_company = "company=" +dcomp ;
var data_phone = "phone=" +dphon ;
var data_message = "message=" +dmess ;

var data = ([data_first, data_last, data_email, data_company, data_phone, data_message]).join('&');

alert(data_first);

     xhr.open("POST", "mailer.php", true);
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     xhr.setRequestHeader("Content-length", data.length);

     xhr.send(data);
}