使用jquery AJAX提交表单[重复]答案

【问题标题】：Submitting Form using jquery AJAX [duplicate]使用jquery AJAX提交表单[重复]
【发布时间】：2020-01-30 12:53:37
【问题描述】：

我正在尝试使用 jQuery ajax 提交我的表单，但我的数据没有发布到 PHP，它在 $_POST 数组中没有返回空数组。

这是我的代码 - 这是我的表单：

<form action = "/webdevelopmentpakistan/send_mail.php" method = "post" class = "myForm"   >
                <div class="row">
                    <div class="col-md-3 col-sm-12">
                        <div class="form-group">
                            <input class="form-control" id="fname" type="text" required name= "full_name" placeholder="Full Name" 
                             />
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12">
                        <div class="form-group"> 
                            <input class="form-control" type="tel" required name = "phone" placeholder="+92" id="phone" onkeypress="return isNumberKey(event)" />
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12">
                        <div class="form-group">
                            <input class="form-control" type="email" required name = "email" id="email" placeholder="Email"/>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12">
                        <div class="form-group">
                            <input class="btn popup" type="submit"    name = "submit" value="CONTACT OUR CONSULTANT"/>
                        </div>
                    </div>
                </div>
</form>

它是一个 ajax 部分：

  $('form').on('submit', function (e) {
    e.preventDefault();

    var url = $(this).attr("action");
    var form_data = $(this).serialize();


    $.ajax({
            type: 'POST',
            url: url,
            data: $('.myForm').serialize() ,
            dataType : 'JSON',
            //contentType: "application/x-www-form-urlencoded",
            success: function (data) { // here I'm adding data as a parameter which stores the response

                    console.log(data); // instead of alert I'm changing this to console.log which logs all the response in console.
            },
             error:function(xhr, textStatus, thrownError, data)
             {
                 console.log("Error: " + thrownError);
                 console.log("Error: " + textStatus);


             }
                   });



    // var popup = document.getElementById("myPopup");
    // popup.classList.toggle("show");
    console.log(form_data);

});

在其他页面使用的PHP代码：

if(isset($_POST)) {
        echo json_encode($_POST);
    }

这是我在提交表单时得到的序列化数组，但它没有传递给 php

full_name=talha&phone=012345678&email=admin%40gmail.com

【问题讨论】：

在浏览器开发工具、网络面板中检查实际请求的样子。
不，它仍然通过序列化获取相同的数据，但它没有发布到 php。
当我使用 $_POST['full_name'] 获取时表示未定义索引
成功函数中没有传递参数 - function(data)
nothing changed data still not pass.. 注意：未定义索引：第 6 行 C:\xampp\htdocs\webdevelopmentpakistan\web-development-in-pakistan.php 中的全名

标签： javascript php jquery html ajax

【解决方案1】：

欢迎使用 stackoverflow，以下是更改，希望它会起作用

$.ajax({
    type: 'POST',
    url: url,
    data: $('.myForm').serialize() ,
    dataType : 'json', // changing data type to json
    success: function (data) { // here I'm adding data as a parameter which stores the response
        console.log(data); // instead of alert I'm changing this to console.log which logs all the response in console.
    }
});

在php中

if(isset($_POST)) {
    echo json_encode($_POST);
}

这应该在你的控制台中打印一个 post 参数数组，但是你会在 php 中得到一个数组。

【讨论】：

实际上，我将数据发布到表单所在的同一页面，并且在发布数据后，我显示了一个弹出模式，其中我正在使用 recaptcha 并且我将发布的数据存储在变量中，这样我就可以验证recaptcha后再次发布它们
成功：函数（数据）{console.log（数据）； } 成功函数不起作用 json gves 错误响应 ..
请问控制台中的错误是什么？
Error: SyntaxError: Unexpected token a in JSON at position 2 这是我得到的错误
我已经解决了 .. 非常感谢您的时间并帮助我使用 JSON.stringify($(this).serialize()) 将序列化数组更改为 JSON 对象，这完成了工作，谢谢再次帮助解决这个问题。

【解决方案2】：

表单操作需要是绝对 url，即https://somewebsite.com 或您网站上的相对 url，因此理想情况下它应该是 /some-url.php。在此处阅读form action

所以你的表单开始标签应该是，

<form action = "/web-development-in-pakistan.php" method = "post" class = "myForm"  target="_self">

所以当你这样做时，在你的 javascript 代码中

var url = $(this).attr("action");

我也相信在你的 ajax 调用中，type 需要是method，所以，

$.ajax({
  method: "POST",
  .....
 })

【讨论】：