javascript - 对同一PHP页面执行AJAX发布请求（jQuery表单插件）(Perform AJAX post request to the same PHP page (Jquery Form Plugin))

Question

I'm writing a new web interface using JavaTMP that is an AJAX based admin template.

(我正在使用JavaTMP编写一个新的Web界面，它是一个基于AJAX的管理模板。)

After spending some time on understanding how it works i created a page with a form that will allow you to create a new project in my software.

(在花了一些时间了解其工作原理之后，我创建了一个页面，该页面的表单将使您可以在软件中创建一个新项目。)

Basically using php it will be pretty easy to create a form with a post method calling the same page and then performing a query to the database but the problem is here the post is submitted using AJAX and doesn't follow the usual rules such as

(基本上使用php，使用调用同一页面的post方法创建表单，然后执行对数据库的查询将非常容易，但是问题是这里的帖子是使用AJAX提交的，并且不遵循诸如)

$ajax.post(...)

So I'm going to explain you how i did so far and remember that my main purpose is to perform a query on the same page to show a success notify.

(因此，我将向您解释我到目前为止的工作方式，并记住我的主要目的是在同一页面上执行查询以显示成功通知。)

All you see below is a partial page called " addproject ".

(您在下面看到的是一个名为“ addproject ”的部分页面。)

I left the original template comments if you need them:

(如果需要，我留下了原始模板注释：)

<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: 

' + 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>

So as you see it performs the ajax request in this way, i tried to take a look to the library but it's a mess and on their website with their documentation they don't tell you how to accomplish this task.

(因此，当您看到它以这种方式执行ajax请求时，我试图看一下该库，但情况一团糟，在他们的网站及其文档中，他们没有告诉您如何完成此任务。)

I tried to perform another post request inside the post callback but it just freezes the page.

(我试图在发布回调中执行另一个发布请求，但它只是冻结了页面。)

I tried a lot and on the code up there I made just setting a div text with the post parameters but i need to pass them to the php code...

(我尝试了很多，在代码上我只是用post参数设置了div文本，但我需要将它们传递给php代码...)

If you can tell me something It should be great guys!

(如果您能告诉我一些事情，那就应该是好人！)

Thank You!

(谢谢！)

  ask by TheSphinx translate from so

Answer 1

I build a sample in local with your code, there is no problem with ajax or new post request on complete.

(我使用您的代码在本地构建了一个示例，ajax或新的发布请求完成后都没有问题。)

the two change that I made is this: in form set action

(我所做的两个更改是：在表单设置操作中)

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

because I want to see what params post and pass 404 error.

(因为我想查看哪些参数发布并传递404错误。)

and change input name for description :

(并更改输入名称以进行描述：)

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

for sending as a separated param.

(用于作为单独的参数发送。)

you can try your self :

(您可以尝试自己：)

test.php file:

(test.php文件：)

<?php
var_dump($_POST);

index.html :

(index.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: 

' + 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>

and you see in network tab that params send successfully.

(您会在网络标签中看到参数发送成功。)

even the second post request look like well.

(甚至第二个帖子请求看起来也不错。)