Question

我有两个ajax请求，一个在用户输入后运行，然后第二个在用户点击后运行。我可以毫无问题地运行第一个，但是当我点击第二个时，没有任何反应？我可以一个接一个地运行两个AJAX请求吗？可能会出现第二个请求永远不会运行的问题。这是我的代码

在下面的示例中，当用户在用户单击按钮

时键入和更新ID时，lookID会运行

HTML

<!DOCTYPE html>
<html>
<head>
    <title>ID Test</title>
</head>
<body>
    <div>
        <div class="ui-helper-clearfix">
            Update new user
        </div>
        <div id="dialog-form">
            <form style="text-align: center;">
                <fieldset style="border: none;">
                    <span class="searchDisplay" id="rst" style="padding: 10px 0px; display: inline;"></span> 
                    <span class="deleteicon"><input autocomplete="off" class="text ui-widget-content ui-corner-all deletable" id="id" name="id" placeholder="xxx-xx" type="text"> <span></span></span>
                </fieldset>
            </form>
        </div>
        <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
            <div class="ui-dialog-buttonset">
                <button aria-disabled="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" type="button"><span class="ui-button-text">Update ID</span></button> <button aria-disabled="false" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" type="button"><span class="ui-button-text">Cancel</span></button>
            </div>
        </div>
    </div>
    <script>
                       $(document).ready(function() {
                       $(function() {
                          var dialog, form,
                              id = $("#id"),
                              allFields = $([]).add(name),
                              tips = $(".validateTips");

                          function updateTips(t) {
                              tips.text(t).addClass("ui-state-highlight");
                              setTimeout(function() {
                                  tips.removeClass("ui-state-highlight", 1500);
                              }, 500);
                          }

                          function checkID() {
                               if ($("#validity").html() == "Valid ID") {
                                   updateID($("#id").val());
                               }
                               else {
                                   alert("Please use a valid id");
                               }
                               var valid = true;
                               allFields.removeClass("ui-state-error");
                               return valid;
                          }
                          dialog = $("#dialog-form").dialog({
                              autoOpen: false,
                              width: 350,
                              modal: true,
                              buttons: {
                                  "Update Id": checkID,
                                  Cancel: function() {
                                      dialog.dialog("close");
                                  }
                              },
                              close: function() {
                                  form[0].reset();
                                  allFields.removeClass("ui-state-error");
                              }
                          });
                          form = dialog.find("form").on("submit", function(event) {
                              event.preventDefault();
                              checkID();
                          });
                          $("#create-user").button().on("click", function() {
                              dialog.dialog("open");
                          });
                       });

                       $("input.deletable").wrap("<span class=\"deleteicon\" />").after($("<span/>").click(function() {
                           $(this).prev("input").val("").focus();
                           $("#rst").html("");
                       }));


                       $("input.deletable").keyup(function() {
                           runSearch();
                       });
                   });
                    function updateID(user_id) {
                        $.ajax({
                            url: "http://sample.com/ajax-functions.php",
                            data: "ajax=create&id="+user_id,
                            type: "POST",
                            success:function(html) {
                            }
                        });
                    }

                    function runSearch() {
                        var values = $("input.deletable").values();
                        $.ajax({
                            url: "http://sample.com/ajax-functions.php",
                            data: "ajax=search&id="+values,
                            type: "POST",
                            success: function(html){
                                $("#div_rst").slideDown();
                                $("#div_rst").addClass("searchDisplay");
                                $("#div_rst").html(html);
                            }
                        });
                    }                  
    </script>
</body>
</html>

PHP

<?php
if($_POST['ajax'] == 'create') {
    $id = $_POST['id'];
    $return = '<script>alert("' . $id . '")</script>';

}

else if ($_POST['ajax'] == 'search') {
    $id = $_POST['id'];

    $return = '<div style="height:10px;max-width:100%;">';

    if ($id) {
        $return .= '<div id="validity">Valid ID</div>';
    }
    else {
        $return .= '<div id="validity">Invalid ID</div>';
    }
    $return .= '</div>';

}
?>

Answer 1

你怎么知道第二个不运行？您将返回一些带有script标记和alert()的HTML，但在您的成功函数中，您不会执行任何操作。您需要将HTML添加到页面以获取任何结果。作为测试，您可以在成功函数中添加alert(html);，看看是否有任何事情发生。

您的updateID()函数似乎也使用了参数user_id，但在您的数据中，您正在传递id。那可能是个错误？

向我们提供一些我们可以实际运行的完整代码也许是一个好主意;基于以上所述，我们如何知道函数是否被调用？

从另一个输入后输入ajax请求

1 个答案: