在从另一个请求输入后运行ajax请求


Run ajax request after input from another one

我有两个ajax请求,一个在用户类型之后运行,然后第二个在用户单击时运行。我可以运行第一个没有任何问题,但当我点击第二个,什么都没有发生?我可以一个接一个地运行两个AJAX请求吗?第二个请求永远不会运行是否存在问题?这是我的代码

在下面的示例中,当用户输入时运行lookID,当用户单击

按钮时运行updateID

<!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>';
}
?>

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

它看起来也像你的updateID()函数使用参数user_id,但在你的数据你正在传递id。这可能是个错误?

给我们一些可以实际运行的完整代码可能也是一个好主意;基于上述,我们如何知道函数是否被调用?