Question

当我在Jquery代码的主体中调用Ajax时，它会返回正确的结果，但是当我从函数内部调用它时，它会失败。这是服务器端代码：

    <?php
    $what       = $_POST["what"];
    $where      = $_POST["where"];

    if(isset($what)){
        $data = array(
            "what"      => $what,
            "where"     => $where,
        );
        echo json_encode($data);
    }
    ?>

以下是成功的代码（将文本返回给浏览器）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <html>
        <head>
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script type="text/javascript">

            what = "dog";
            where = "in the manger";

            $.ajax({
                url: "test.php",
                type: "POST",
                data: {what : what, where : where},
                dataType: "json",
                success: function (data)
                {
                    $("#result").text(JSON.stringify(data));
                },
                    error: function (error)
                {
                    alert("ajax error ");
                }
            });

            </script>
        </head>
        <body> <div id="result"></div> </body>
    </html>

这里是失败的代码（警告“错误”）： `

    <html>
    <head>
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">

            what = "dog";
            where = "in the manger";

            function get_click () {
            $.ajax({
                url: "test.php",
                type: "POST",
                data: {what : what, where : where},
                dataType: "json",
                success: function (data)
                {
                    $("#result1").text(JSON.stringify(data));
                },
                error: function (error)
                {
                    alert("ajax error " + JSON.stringify(error));
                }
            });
            }
        </script>
    </head>

    <body>
        <div id="result1"></div> </body>
        <form onsubmit="get_click()">
            <input type="submit">
        </form>
    </body>
    </html>

我想让函数包装的Ajax调用工作，因为我需要在将表单中的数据发送到服务器之前对其进行处理。我做错了什么？

环境是一个无头的Raspberry Pi，在Windows 10上使用Raspbian操作系统，FireFox浏览器。

Answer 1

您似乎没有在浏览器中看到任何文字的原因是您提交的是表单而您没有阻止表单提交的默认操作。这将导致发送ajax调用，但随后页面将立即重新加载，并且不会显示ajax调用的结果。

要解决此问题，您可以在事件处理程序中调用e.preventDefault()。

function get_click(e) {
    e.preventDefault();
    $.ajax({
        url: "test.php",
        type: "POST",
        data: {what : what, where : where},
        dataType: "json",
        success: function (data) {
            $("#result1").text(JSON.stringify(data));
        },
        error: function (error) {
            alert("ajax error " + JSON.stringify(error));
        }
    });
}

然后，将事件参数添加到HTML：

   <form onsubmit="get_click(event)">
        <input type="submit">
   </form>

工作演示：https://jsfiddle.net/jfriend00/841v9rpf/。如果您从演示中删除e.preventDefault()，则表单会提交。

在函数内调用时，Ajax失败

1 个答案: