使用 jQuery 和 PHP 序列化和提交表单答案

【问题标题】：Serializing and submitting a form with jQuery and PHP使用 jQuery 和 PHP 序列化和提交表单
【发布时间】：2013-02-16 21:53:49
【问题描述】：

我正在尝试使用 jQuery 发送表单的数据。但是，数据不会到达服务器。你能告诉我我做错了什么吗？

我的 HTML 表单：

<form id="contactForm" name="contactForm" method="post">
    <input type="text" name="nume" size="40" placeholder="Nume">
    <input type="text" name="telefon" size="40" placeholder="Telefon">
    <input type="text" name="email" size="40" placeholder="Email">
    <textarea name="comentarii" cols="36" rows="5" placeholder="Message"></textarea> 
    <input id="submitBtn" type="submit" name="submit" value="Trimite">
</form>

JavaScript（与上述形式在同一个文件中）：

<script type="text/javascript">
    $(document).ready(function(e) {

        $("#contactForm").submit(function() {
            $.post("getcontact.php", $("#contactForm").serialize())
            // Serialization looks good: name=textInNameInput&&telefon=textInPhoneInput etc
            .done(function(data) {
                if (data.trim().length > 0) {
                    $("#sent").text("Error");   
                } else {
                    $("#sent").text("Success");
                }
            });

            return false;
        })
    });
</script>

服务器端 PHP (/getcontact.php):

$nume = $_REQUEST["nume"]; // $nume contains no data. Also tried $_POST
$email = $_REQUEST["email"];
$telefon = $_REQUEST["telefon"];
$comentarii = $_REQUEST["comentarii"];

你能告诉我我做错了什么吗？

更新

检查了var_dump($_POST)，它返回了一个空数组。

奇怪的是，在我的本地机器上测试的相同代码运行良好。如果我将文件上传到我的托管空间，它就会停止工作。我尝试在不使用 jQuery 的情况下做一个老式的表单，并且所有数据都是正确的。

我不明白这会是一个服务器配置问题。有什么想法吗？

谢谢！

【问题讨论】：

您的表单提交了吗？还是只是调用ajax函数？
@zamil 它已提交/我可以将数据从服务器端返回到 jquery。
@Dan_Dinu：我发布了一个我通常用于 ajax 调用的代码。如果你愿意，你可以使用它
您有托管空间的网络链接吗？

标签： php jquery forms serialization form-submit

【解决方案1】：

你可以使用这个功能

var datastring = $("#contactForm").serialize();
$.ajax({
    type: "POST",
    url: "your url.php",
    data: datastring,
    dataType: "json",
    success: function(data) {
        //var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
        // do what ever you want with the server response
    },
    error: function() {
        alert('error handling here');
    }
});

返回类型为json

编辑：我使用event.preventDefault 来防止浏览器在这种情况下被提交。

为答案添加更多数据。

dataType: "jsonp"如果是跨域调用。

beforeSend: //这是一个预请求回调函数

complete: // 请求结束后调用的函数，所以无论成功或错误都必须执行的代码可以放在这里

async: // 默认情况下，所有请求都是异步发送的

cache: // 默认为 true。如果设置为 false，它将强制浏览器不缓存请求的页面。

找到官方页面here

【讨论】：

【解决方案2】：

您可以使用表单数据添加额外的数据

使用 serializeArray 并添加附加数据：

var data = $('#myForm').serializeArray();
    data.push({name: 'tienn2t', value: 'love'});
    $.ajax({
      type: "POST",
      url: "your url.php",
      data: data,
      dataType: "json",
      success: function(data) {
          //var obj = jQuery.parseJSON(data); if the dataType is not     specified as json uncomment this
        // do what ever you want with the server response
     },
    error: function() {
        alert('error handing here');
    }
});

【讨论】：

完美，正是我需要的。当涉及大量数据操作时，字符串太粗糙而无法使用！谢谢！

【解决方案3】：

 $("#contactForm").submit(function() {

    $.post(url, $.param($(this).serializeArray()), function(data) {

    });
 });

【讨论】：

解释对 OP 很有帮助。

【解决方案4】：

如果表单中的数据正确序列化，您是否在控制台中检查过？ ajax请求成功了吗？此外，您没有关闭占位符引号，这可能会导致一些问题：

 <textarea name="comentarii" cols="36" rows="5" placeholder="Message>

【讨论】：

是的，序列化数据看起来不错，请求成功占位符是复制粘贴错字。
你试过var_dump($_POST);。您还可以检查当您将 $.post url 更改为 getcontact.php?test=1 时，您是否真的在服务器端的 $_GET['test'] 中收到它。
请参阅我的编辑部分。谢谢
这似乎是服务器端问题。

【解决方案5】：

如果 POST 或 GET，您是否查看过 firebug？

检查控制台显示。

放入测试脚本：

console.log(data);

你可以看到来自服务器的响应，如果它显示了什么。

【讨论】：

【解决方案6】：

问题可能是PHP配置：

请检查 php.ini 文件中的 max_input_vars 设置。

例如，尝试将此设置的值增加到 5000。

max_input_vars = 5000

然后重新启动您的网络服务器并尝试。

【讨论】：

【解决方案7】：

两端注册或用户在通过表单提交完成注册时通过ajax自动注册到“Shouttoday”。

var deffered = $.ajax({
     url:"code.shouttoday.com/ajax_registration",
     type:"POST",
     data: $('form').serialize()
    }); 

        $(function(){ 
            var form;
            $('form').submit( function(event) {
                var formId = $(this).attr("id");
                    form = this;
                event.preventDefault();
                deffered.done(function(response){
                    alert($('form').serializeArray());alert(response);
                    alert("success");
                    alert('Submitting');
                    form.submit();
                })
                .error(function(){
                    alert(JSON.stringify($('form').serializeArray()).toString());
                    alert("error");
                    form.submit();
                });
            });
         });

【讨论】：

【解决方案8】：

这是@rahulbhondave 答案的更详细和解释的版本

$('#my-button').click(function () {
    $.post(this.form.action, $(this.form).serializeArray(),
            function (successMessage) {
                console.log(
                    successMessage
                );
            },
            "json"
        )
        .done(function () {
            alert("second success");
        })
        .fail(function () {
            alert("error");
        })
        .always(function () {
            alert("finished");
        });
});

【讨论】：