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

Posted 2023-02-22

【中文标题】使用 jQuery 和 PHP 序列化和提交表单

【英文标题】：Serializing and submitting a form with jQuery and 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 调用的代码。如果你愿意，你可以使用它

您有托管空间的网络链接吗？

【参考方案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 文件中的 ma​​x_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");
        );
);