Question

我正在尝试使用jQuery进行简单的AJAX。我将一个空数据发布到.php页面，然后将JSON编码数据回显到我的javascript所在的页面。

我在执行此操作时遇到错误但我无法弄清楚为什么此代码会产生错误..

这是我写的代码，

的index.php

    <form id="getData">
        <button name="control" type="submit" value="A">GET DATA</button>
    </form>

    <form id="showData">
        <button name="control" type="submit" value="A">SHOW DATA</button>
    </form>
    <div id="results"></div>
    <div id="map"></div>

    <script>
    $("document").ready(function(){
        $("#getData").submit(function(event){

            $.ajax({
                url : "/getVehiclePosition.php",
                type: "POST",
                data: "",
                success: function(data, textStatus, jqXHR)
                {
                    //data - response from server
                    console.log("Hooray, it worked!");
                    $('#results').append(data);
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    console.error(
                        "The following error occurred: "+
                        textStatus, errorThrown
                    );
                }
            });

        });
    });
    </script>

在Chrome控制台中，我收到以下错误..

The following error occurred: error 
error @ ?control=A:52
i @ jquery-1.12.2.min.js:2
fireWith @ jquery-1.12.2.min.js:2
y @ jquery-1.12.2.min.js:4
c @ jquery-1.12.2.min.js:4

出于某种原因，如果我把表格提交绑定到#getDATA，它再次运作良好..此刻拉我的头发，请帮忙！非常感谢提前。

[UPDATE] ============================================ ======================= 捕获XHR，

Answer 1

您没有停止通过默认操作提交表单，以便您可以实现ajax请求。在你的ajax之前使用event.preventDefault（）。

$("document").ready(function(){
        $("#getData").submit(function(event){
            event.preventDefault();

            $.ajax({
                url : "/getVehiclePosition.php",
                type: "POST",
                data: "",
                success: function(data, textStatus, jqXHR)
                {
                    //data - response from server
                    console.log("Hooray, it worked!");
                    $('#results').append(data);
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    console.error(
                        "The following error occurred: "+
                        textStatus, errorThrown
                    );
                }
            });

        });
    });

jQuery - Ajax POST方法错误，

1 个答案: