對同一個 PHP 頁面執行 AJAX 發布請求（Jquery 表單插件）

Question

我正在使用JavaTMP編寫一個新的 Web 界面，它是一個基於 AJAX 的管理模板。 在花了一些時間了解它是如何工作的之后，我創建了一個帶有表單的頁面，允許您在我的軟件中創建一個新項目。 基本上使用 php 可以很容易地使用 post 方法創建一個表單，調用相同的頁面，然后對數據庫執行查詢，但問題是這里的帖子是使用 AJAX 提交的，並且不遵循通常的規則，例如

$ajax.post(...)

所以我將向您解釋到目前為止我是如何做的，並記住我的主要目的是在同一頁面上執行查詢以顯示成功通知。

您在下面看到的只是一個名為“ addproject ”的部分頁面。 如果您需要，我會留下原始模板評論：

<script type="text/javascript">
  jQuery(document).ready(function () {
        (function ($) {
            $('#jquery-form-plugin-test-id').ajaxForm({
                beforeSubmit: showRequest, // pre-submit callback
                success: showResponse // post-submit callback
                        // other available options:
                        //url:       url         // override for form's 'action' attribute
                        //type:      type        // 'get' or 'post', override for form's 'method' attribute
                        //clearForm: true        // clear all form fields after successful submit
                        //resetForm: true        // reset the form after successful submit

                        // $.ajax options can be used here too, for example:
                        //timeout:   3000
            });
            // pre-submit callback
            function showRequest(formData, jqForm, options) {
                // formData is an array; here we use $.param to convert it to a string to display it
                // but the form plugin does this for you automatically when it submits the data
                var queryString = $.param(formData);

                // jqForm is a jQuery object encapsulating the form element.  To access the
                // DOM element for the form do this:
                // var formElement = jqForm[0];

                alert('About to submit: \n\n' + queryString);

                $('#result').text(queryString);

                return true;
            }

// post-submit callback
            function showResponse(responseText, statusText, xhr, $form) {
                // for normal html responses, the first argument to the success callback
                // is the XMLHttpRequest object's responseText property

                // if the ajaxForm method was passed an Options Object with the dataType
                // property set to 'xml' then the first argument to the success callback
                // is the XMLHttpRequest object's responseXML property

                // if the ajaxForm method was passed an Options Object with the dataType
                // property set to 'json' then the first argument to the success callback
                // is the json data object returned by the server
                //$('#result').text(statusText);
                alert("Submitted");
            }
        }(jQuery));
      });
</script>

<div id="result"></div>

<form id="jquery-form-plugin-test-id" class="form" action="" method="post" novalidate="novalidate">

  <div class="form-group required row">
      <label class="col-md-2 col-form-label">Name</label>
      <div class="col-md-4">
          <input class="form-control" id="id_name" maxlength="30" name="name"
                 placeholder="Project Name" required="required" title="" type="text" />
      </div>
  </div>

  <div class="form-group required row">
      <label class="col-md-2 col-form-label">Description</label>
      <div class="col-md-4">
          <input class="form-control" id="id_description" maxlength="30" name="name"
                 placeholder="Project Description" required="required" title="" type="text" />
      </div>
  </div>

  <div class="form-actions">
    <button type="submit" name="submit" class="btn btn-primary" id="register-submit-btn">
        <span class="fa fa-plus"></span> Create
    </button>
  </div>

</form>

因此，當您看到它以這種方式執行 ajax 請求時，我試圖查看圖書館，但它很混亂，並且在他們的網站上，他們的文檔沒有告訴您如何完成這項任務。

我試圖在 post 回調中執行另一個 post 請求，但它只是凍結了頁面。

我嘗試了很多，在上面的代碼中，我只是用 post 參數設置了一個 div 文本，但我需要將它們傳遞給 php 代碼......

如果你能告訴我一些事情，那應該是很棒的家伙！ 謝謝你！

Answer 1

我用您的代碼在本地構建了一個示例，ajax 或 new post 請求完成時沒有問題。 我所做的兩個更改是：在表單設置操作中

<form id="jquery-form-plugin-test-id" class="form" action="test.php" method="post" novalidate="novalidate">

因為我想看看 params 發布了什么並傳遞 404 錯誤。

並更改描述的輸入名稱：

<input class="form-control" id="id_description" maxlength="30"
name="desc" placeholder="Project Description" required="required" title="" type="text" />

用於作為單獨的參數發送。

你可以試試自己：

test.php 文件：

<?php
var_dump($_POST);

索引.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            (function ($) {
                $('#jquery-form-plugin-test-id').ajaxForm({
                    beforeSubmit: showRequest, // pre-submit callback
                    success: showResponse // post-submit callback
                    // other available options:
                    //url:       url         // override for form's 'action' attribute
                    //type:      type        // 'get' or 'post', override for form's 'method' attribute
                    //clearForm: true        // clear all form fields after successful submit
                    //resetForm: true        // reset the form after successful submit

                    // $.ajax options can be used here too, for example:
                    //timeout:   3000
                });
                // pre-submit callback
                function showRequest(formData, jqForm, options) {
                    // formData is an array; here we use $.param to convert it to a string to display it
                    // but the form plugin does this for you automatically when it submits the data
                    var queryString = $.param(formData);

                    // jqForm is a jQuery object encapsulating the form element.  To access the
                    // DOM element for the form do this:
                    // var formElement = jqForm[0];

                    alert('About to submit: \n\n' + queryString);

                    $('#result').text(queryString);

                    return true;
                }

// post-submit callback
                function showResponse(responseText, statusText, xhr, $form) {
                    // for normal html responses, the first argument to the success callback
                    // is the XMLHttpRequest object's responseText property

                    // if the ajaxForm method was passed an Options Object with the dataType
                    // property set to 'xml' then the first argument to the success callback
                    // is the XMLHttpRequest object's responseXML property

                    // if the ajaxForm method was passed an Options Object with the dataType
                    // property set to 'json' then the first argument to the success callback
                    // is the json data object returned by the server
                    //$('#result').text(statusText);
                    alert("Submitted");
                    $.ajax({
                        url: 'https://reqres.in/api/users?page=2',
                        method : 'GET',
                        success : function (data){
                            result.html(result.html()+JSON.stringify(data));
                        }
                    })
                }
            }(jQuery));
        });
    </script>
</head>
<body>
<div id="result"></div>

<form id="jquery-form-plugin-test-id" class="form" action="test.php" method="post" novalidate="novalidate">

    <div class="form-group required row">
        <label class="col-md-2 col-form-label">Name</label>
        <div class="col-md-4">
            <input class="form-control" id="id_name" maxlength="30" name="name"
                   placeholder="Project Name" required="required" title="" type="text" />
        </div>
    </div>

    <div class="form-group required row">
        <label class="col-md-2 col-form-label">Description</label>
        <div class="col-md-4">
            <input class="form-control" id="id_description" maxlength="30" name="desc"
                   placeholder="Project Description" required="required" title="" type="text" />
        </div>
    </div>

    <div class="form-actions">
        <button type="submit" name="submit" class="btn btn-primary" id="register-submit-btn">
            <span class="fa fa-plus"></span> Create
        </button>
    </div>

</form>
</body>
</html>

並且您在網絡選項卡中看到參數發送成功。 甚至第二個帖子請求看起來也不錯。