无法在jQuery文档就绪时触发Ajax调用

Question

我目前在尝试将表单提交到数据库时遇到ajax调用问题。

这是我的代码：

<?php
    include 'dbConnect.php';
    include 'session.php';
?>
<form class="form" id="form" action="" method="POST">
    <table class = "left">
        <tr align="justify">
            <td></td>
        </tr>
        <tr>
            <td>
                <p align="right">
                    <font size = "4">New Subject Name : <input type = "text" name = "subjectName" id = "subjectName"/>
                    </font>
                </p>
             </td>
         </tr>
         <tr>
             <td>
                 <p align="center">
                     <input type = 'image' name = 'submit' src="images/Submit.gif" value = 'Submit' width='100' height='35'/>
                  </p>  
             </td>
         </tr>
    </table> 
</form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    </script>
<script>

       $(document).ready( function() { 
                    // Bind to the submit event of our form
        $("form#form").submit(function(event){

                // Abort any pending request
                if (request) {
                    request.abort();
                }
                // setup some local variables
                var $form = $(this);

                // Let's select and cache all the fields
                var $inputs = $form.find("input, select, button, textarea");

                // Serialize the data in the form
                var serializedData = $form.serialize();

                // Let's disable the inputs for the duration of the Ajax request.
                // Note: we disable elements AFTER the form data has been serialized.
                // Disabled form elements will not be serialized.
                $inputs.prop("disabled", true);

                // Fire off the request to /form.php
                request = $.ajax({
                    url: "subjectItem.php",
                    type: "post",
                    data: serializedData
                });

                // Callback handler that will be called on success
                request.done(function (response, textStatus, jqXHR){
                    // Log a message to the console
                    console.log("Hooray, it worked!");
                });

                // Callback handler that will be called on failure
                request.fail(function (jqXHR, textStatus, errorThrown){
                    // Log the error to the console
                    console.error(
                        "The following error occurred: "+
                        textStatus, errorThrown
                    );
                });

                // Callback handler that will be called regardless
                // if the request failed or succeeded
                request.always(function () {
                    // Reenable the inputs
                    $inputs.prop("disabled", false);
                });

                // Prevent default posting of form
                event.preventDefault();
            });
        });
</script>

我不确定为什么用户单击提交按钮后它不将数据插入数据库。 如果我在代码中做错了什么，请指出我的错误。 谢谢

Answer 1

<script>
        // setup a global var for all ajax requests
        $.xhrPool = [];

        // abort all ajax requests
        $.xhrPool.abortAll = function() {
                $(this).each(function(idx, jqXHR) { 
                        jqXHR.abort();
                });
                $.xhrPool.length = 0
        };

        // setup ajax
        $.ajaxSetup({
                beforeSend: function(jqXHR) {
                        $.xhrPool.push(jqXHR);
                },
                complete: function(jqXHR) {
                        var index = $.xhrPool.indexOf(jqXHR);
                        if (index > -1) {
                                $.xhrPool.splice(index, 1);
                        }
                }
        });

        // make request
        function sendForm(){
                $.xhrPool.abortAll();

                // register all inputs
                var $inputs = $form.find("input, select, button, textarea");

                // set up form data
                var formData = new FormData($('.form')[0]);

                // set up post url
                var formUrl = "";

                // disable inputs
                $inputs.prop("disabled", true);

                //make ajax request
                $.ajax({
                        url: formUrl,
                        type: 'POST',
                        data: formData,
                        mimeType: "multipart/form-data",
                        contentType: false,
                        cache: false,
                        processData: false,
                        success: function(data, textStatus, jqXHR){
                                // handle success
                                console.log("Hooray, it worked!");

                                // Reenable the inputs
                                $inputs.prop("disabled", false);
                        },
                        error: function(jqXHR, textStatus, errorThrown){
                                // handle error
                                console.error("The following error occurred: "+textStatus, errorThrown);

                                // Reenable the inputs
                                $inputs.prop("disabled", false);
                        }
                });
        }
</script>

将您的提交按钮替换为<button type="button" onclick="sendForm();">Submit Form</button></p>

希望对您有所帮助，不要忘记填写formUrl var