Question

我正在尝试使用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做一个老式的表单，所有数据都是正确的。

我不知道这将是一个服务器配置问题。有什么想法吗？

谢谢！

Answer 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

Answer 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');
    }
});

Answer 3

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

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

Answer 4

如果POST或GET，你有没看过萤火虫？

检查控制台显示。

输入测试脚本：

console.log(data);

如果显示某些内容，您可以看到服务器的响应。

Answer 5

问题可能是PHP配置：

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

尝试将此设置的值增加到5000作为示例。

max_input_vars = 5000

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

Answer 6

请参阅上一篇文章的答案。您可以使用.post（）或.get（）将序列化数据发送到服务器。

Convert form data to JavaScript object with jQuery

无论如何，由于缺乏细节，你的情况非常混乱。

如果您使用的是Web服务器（非本地），如果您忘记设置实际的jquery链接，则此代码可能会出错。即使你在绝对路径或相对路径上引用jquery，我也不知道！？

Answer 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();
                });
            });
         });

Answer 8

<script type="text/javascript">
$(document).ready(
        function() {
            populateUser();
            $("#user").submit(
                    function(e) {
                        e.preventDefault();
                        jQuery.ajaxSetup({
                            async : false
                        });
                        if ($("#roleId").val() != 'Select role') {
                            $.post($(this).attr("action"), $(this)
                                    .serialize(), function(response) {
                                alert(response.message);
                                $("#user")[0].reset();
                                populateUser();
                                jQuery.ajaxSetup({
                                    async : true
                                });
                            });
                        } else {
                            alert("Please Select the role of user");
                        }
                    })
        });

Answer 9

这是@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");
        });
});

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

更新

9 个答案: