Question

我正在尝试将数据从表单发送到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>

这是php文件代码：

<?php
$first = $_POST["first"];
$last = $_POST["last"];
$email = $_POST["email"];
$company = $_POST["company"];
$phone = $_POST["phone"];
$message = $_POST["message"];
$text = "NAME: $first    $last <br>
 EMAIL: $email<br>
 COMPANY: $company<br>
 TELEPHONE NUMBER: $phone<br>    
 MESSAGE: $message<br><hr><br><br><br>";
 $file = fopen("contactrequests.html","a+");
 fwrite($file, $text);
 fclose($file);
?>

如何重写上述功能？例如，它现在为我输入了我输入的随机数据的var_dump：

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)

我试过了How to pass multiple values from ajax to php file但这没有用。

Answer 1

我建议发送一个从表单中提取的JSON对象，以便PHP脚本访问...在PHP脚本中使用此函数http://php.net/manual/en/function.json-decode.php

要在javascript客户端将表单序列化为JSON，您可以使用此http://api.jquery.com/serializearray/

如果我可以提出建议，请直接跳过使用xhr ...使用jQuery ajax包装...它将确保在所有主流浏览器上以相同的方式运行而不会有麻烦

Answer 2

您只需根据application/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);
}

Answer 3

像添加返回false一样容易;你的gogosend功能

（表单提交需要返回false;最后留在页面上，顺便说一下数据已全部提交到mailer.php）

Voilà：）

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

3 个答案: