Home > Article > Web Front-end > Detailed explanation of the steps to submit a Form using Ajax

Detailed explanation of the steps to submit a Form using Ajax

php中世界最好的语言Original: 2018-04-25 14:30:121520browse

This time I will bring you a detailed explanation of the steps for using Ajax to submit a Form form. What are the precautions for using Ajax to submit a Form form? Here are practical cases, let’s take a look.

When using the form form, once you click submit to trigger the submit event, it will generally cause the page to jump. The control of behaviors such as jumps between pages is often in the backend, and the backend will control the jump of the page. and data transfer, but at some point you don’t want the page to jump, or you want to put control on the front end and use js to operate the page jump or data changes.

Generally, for this kind of asynchronous operation, we will all think of the ajax method, so after implementing the function, we compiled this article to implement the form submission and subsequent asynchronous operations through the ajax method.

Common form submission methods

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>login test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="login test">  
</head>
<body>
<p id="form-p">
  <form id="form1" action="/users/login" method="post">
    <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
    <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
    <p><input type="submit" value="登录">&nbsp<input type="reset" value="重置"></p>
  </form>
</p>
</body>
</html>

After clicking the login button, the submission event of the form form is triggered, and the data is transmitted to the backend. The backend controls page jumps and data.

ajax implementation of form submission method

After modification, the code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>login test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="ajax方式">
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
    function login() {
      $.ajax({
      //几个参数需要注意一下
        type: "POST",//方法类型
        dataType: "json",//服务端接收的数据类型
        url: "/users/login" ,//url
        data: $('#form1').serialize(),
        success: function (result) {
          console.log(result);//打印服务端返回的数据(调试用)
          if (result.resultCode == 200) {
            alert("SUCCESS");
          }
          ;
        },
        error : function() {
          alert("异常！");
        }
      });
    }
  </script>
</head>
<body>
<p id="form-p">
  <form id="form1" onsubmit="return false" action="##" method="post">
    <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
    <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
    <p><input type="button" value="登录" onclick="login()"> <input type="reset" value="重置"></p>
  </form>
</p>
</body>
</html>

Notes

In the common mode, the type of the login button clicked is "submit" type;
In the common mode , the action of the form is not empty;
What needs to be noted in the ajax method is the parameters in the $.ajax method: dataType and data.

I rarely write front-end code. The level is entry-level. I can understand it and change it, so I often use Baidu, and this time I also used it to implement this function. Baidu, however, the dataType parameter value set in the $.ajax method of the code I received from Baidu was "html" instead of "json", which caused me to keep reporting errors when I first debugged it. Finally, I changed it to "json". Success, so here is a special explanation and reminder, don’t go the wrong way like me. There is also the data value transmitted to the server. Like the above code, just serialize and transmit the data in the form.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Detailed explanation of the steps to submit a Form using Ajax

Related articles