form the front and back to achieve interactive form

Reference say that the form is a form of interaction between front and back office data | form form of advanced learning

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testing form group</title>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
    <form action="" method="post" name='info' id='form'>
        <input type="text" name="user" />
        <input type="text" name="email" />
    </form>
    <button type="button" name='submit' onclick="onSubmit()">提交</button>
</body>
    <script type="text/javascript">
    function onSubmit(){
        var finalRes = $('#form').serializeArray().reduce(function(result, item){
             result[item.name] = item.value;
            return result;
        }, {})
    }
    </script>
</html>

There are two forms form submission method:

Use button to gather information and then check the form and submit it to the server
Add the form directly in the form type=submitattribute input or button type of button, click on the button to submit the form directly from the form action and method of configuration.

<input type = "submit" value = "提交" />

The latter form is submitted for the way there are many configuration options, including enctype, acceptand accept-charset.

type="submit" 和 type="button"

type="submit"The form is submitted (ie form.submit()method) as the default event after its onclick.
type="submit"Html automatically all the input elements with name attributes (including input tag, button labels, select tags, etc.) are submitted as a key.
type="submit"submitThere will be a jump, the page will refresh;

The above three points for type = "button" all are not, type = "button" just a simple click, click on the event you need to add their own. Use the form event handler onSubmit, you can verify the function of the internal parameters, unsuccessful return false, so that you can prevent a form submitted.

.serializeArray ()
This method is the Jquery purpose is to gather all the internal name and value tag can be collected form elements, and then combined into objects of similar value in this form: {name: "xxx", value: "xxx" }. So if a form has multiple input options then the result should look like this:

[{name:"xxx",value:"xxx"},{name:"xxx",value:"xxx"}....]

reduce()

This is ES6 newly added syntax specific usage can refer to the MDN .

We then use it here to the value just after the transition to Json data sequence to the uppermost code example of this result should be:

{user:"xxxx",email:"xxxxxx"}

Use$.ajax()
of used children's shoes are definitely used Jquery $ .ajax () function, which is the most common usage is:

$.ajax({
    type: 'POST',
    url: ,
    data: ,
    dataType: 'json',
    success: function(data){successCallback(data)},
    error: function(jqXHR){failureCallback(jqXHR)},
})

ajax method in several important parameters

contentType (when transmitting data to the server, using the content type (or called coding type).)
data
transmission to the data server. It is converted to a query string, if you have a string of words will not be converted. The query string will be appended to the URL GET request. Object must be a "{键:值}"format.
dataType (return your desired data type from the server)

form the front and back to achieve interactive form

Guess you like