用户输入后如何进行多个 AJAX 查询？答案

【问题标题】：How to make multiple AJAX queries after user input?用户输入后如何进行多个 AJAX 查询？
【发布时间】：2015-07-02 21:10:22
【问题描述】：

这似乎是一件很简单的事情，但我一生都无法找到足够的指导。无论用户输入like this 或this，我都只能找到有关连续 AJAX 查询的信息。

我要做的是创建一个调查，以便在用户回答问题后，网站会用下一个问题替换该问题，依此类推。

这是我目前所拥有的（在 .php 文件中）：

在<head> 中，我为每个连续的元素调用了一个函数：

<script type="text/javascript">
    function nextPage(url) {
        $("#consent-form").empty();
        $("#consent-form").load(url);
    }
</script>

也许不是这样。我不知道。就像我说的那样，我无法在这方面找到足够的帮助。据我所知，empty() 不应该删除#consent-form，而应该只删除它的内容和子项，这正是我想要的行为。

这是我想在每个回答问题后换出的 div 的初始 html 和 php：

<div id="consent-form">

   <?php

        // Check for a valid email address.
        $email = $emailErr = "";

        if ($_SERVER["REQUEST_METHOD"] == "POST") {
            if (empty($_POST["email"])) {
                $emailErr = "* Your email address is required.";
            } else {
                $email = test_input($_POST["email"]);
                if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
                    $emailErr = "* Please enter a valid email address.";
                } else {
                    $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
                    $query = "INSERT INTO survey VALUES ('" . $email . "','" . $actual_link . "','','')";
                    mysql_query($query);
                    echo '<script type="text/javascript">'
                        , 'nextPage("survey.php");'
                        , '</script>'
                        ;
                    }
                }
            }

        function test_input($data) {
            $data = trim($data);
            $data = stripslashes($data);
            $data = htmlspecialchars($data);
            return $data;
        }
     ?>
     <p>
     [Consent form text]
     </p>
     <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
     Please enter your email address: <input type="text" name="email" value="<?php echo $email;?>">
     <span class="error"> <?php echo $emailErr;?></span>
     <br>
     <input type="submit" value="Begin Study">
     </form>
     </div>

我相信你会知道，我正在尝试在那里进行一些表单验证。

这成功地将下一页的内容（“survey.php”）注入到同意表单 div 中。 “survey.php”包括以下内容，使用上面显示的 nextPage() 函数：

$("#csp_form").on('submit', function() {
    nextPage("other.php");
});

但这无法使用“other.php”注入同意表单 div。

然而，现在连表单验证都不起作用了。根据 Firebug 的说法，jquery 库已经引发了某种错误，即使我注释掉了所有 jquery 和 javascript 函数，并且它卡在了一些永久加载操作中。（此问题已修复。）

我要开始扔东西了。我尝试了许多不同的其他技术，但都没有奏效，而且我已经忘记了它们。希望这个最新版本足以获得这方面的指导。

抱歉，拖了这么久，但通常人们会抱怨信息太少，所以我想确保包含所有内容。

编辑：

根据要求，这里是survey.php的当前完整内容（出于隐私目的，文本内容已更改）：

<script type="text/javascript">
    $("#icecream_form").on('submit', function() {
        nextPage("other.php");
        return false;
    });
</script>

<br>
<h2>What's your favorite ice cream flavor?</h2>
<form method="post" id="icecream_form">
    <input type="radio" name="icecream" value="vanilla"> Vanilla
    <br>
    <input type="radio" name="icecream" value="chocolate"> Chocolate
    <br>
    <input type="radio" name="icecream" value="other"> Something else
    <br>
    <input type="radio" name="icecream" value="none" checked> I don't have a favorite.
    <br>
    <br>
    <input type="submit" name="icecream_submit" value="Go" onsubmit="return(false)">
</form>

点击提交后，同意表单中的内容会返回电子邮件表单中的错误消息（“请输入电子邮件地址”），暗示该电子邮件表单已再次发布。如果该 div 中的所有内容真正被survey.php 中的内容取代，我无法理解这怎么可能。

【问题讨论】：

在提交处理程序中添加return false，以防止默认的表单提交。
jquery 库引发什么错误？
仅供参考，您不需要在 .load() 之前使用 .empty()，因为后者会替换 DIV 中的所有内容。
我发现了 jQuery 库错误是怎么回事：显然它有一个 Firebug 错误。所以我禁用了 Firebug，现在表单验证工作正常。
我尝试添加“return false”来提交，但要么我做错了，要么它不起作用。我尝试在调用 nextPage() 之后只输入“return false”。我在调用 nextPage() 之前尝试了 event.preventDefault()。我将 onsubmit="return(false)" 添加到提交按钮。是我做错了还是有其他问题？

标签： php jquery ajax firefox ubuntu-14.04

【解决方案1】：

我认为问题在于我在$("#icecream_form").on('submit', function() { 之前缺少$(document).ready(function () {。这使return false; 能够实际工作。

不过，我还用 jQuery 版本替换了 PHP 表单验证，并删除了 nextPage() 函数，而不是让每个页面都有自己的 .load()，所以这些事情也可能有所不同。

【讨论】：