Submitting __javascript for forms in HTML

Summary of the HTML in the form of submission, in the user login is generally through the form of submission, get account password and then to the back end, the current main mention of three forms: HTML default mode and JS control of the two ways. 1. Submit directly in HTML default mode

<form  action= "/login" method= "post" id= "form" >
    <input type= "text" name= "username" class= "username" Placeholder= "Please enter your username." ">
    <input type=" password "name=" password "class=" password "placeholder=" Please enter your user password. ">
    <input type=" Submit "class=" Submit_button "id=" Submit_button "value=" Login ">
    <button type=" Reset "class=" Reset_button > Reset </button>
</form>

This type of submission has nothing to say, but note that the action attribute within the form tag is responsible for the address being submitted, and method is the way to submit (Get/post). 2. Using jquery for control

Sometimes we need to control the input of account password, such as to determine whether the input box is empty, to further remind users of empty words. For easy operation with jquery, the following:

$ (document). Ready (function () {
    $ (#submit_button). Click (function () {
        var username = $ ('. Username '). Val ();
        var password = $ ('. Password '). val ();
        if (username = = "") {
            alert ("Please enter account");
            return false;
        }

        else {
            if (password = = ') {
                alert ("Please enter password");
                return false;
            }
            else
                $ (' #form '). Submit ();
        }
    })
;

Note that if you do not meet the requirements of the final return to false, or pop-up dialog box will be submitted after the principle of this point, and then fill, first dig pits. 3. Using Ajax for submission

Also using jquery, the code is as follows

$ (document). Ready (function () {
    $ (#submit_button). Click (function () {
         var username = $ ('. Username '). Val ();
          var password = $ ('. Password '). val ();
          Alert (username + ' \ n ' + password);
          $.post (
                                  ' {url_for (' Main.login ')}} ',
                  {username:username, password:password},
                  function () {
                    window.location.href = ' http://www.baidu.com ';});

Note The format of the Post method $.post (URL, data, callback ()), using flask when the back end of the redirection, but the front-end page does not jump, the reason may be the Ajax itself for the control of the page, or AJAX features do not make the page jump, The workaround is to set a jump to the page in the callback () function.