How to submit form data with ajax? Introduction to the method of submitting form data with ajax-JS Tutorial-php.cn

How to submit form data with ajax? Introduction to the method of submitting form data with ajax

不言

Release： 2018-10-12 10:57:21

Original

22172 people have browsed it

For the submission of form form data, we generally think of using ajax to submit it. So, How does ajax submit form form data? The following article will introduce to you the ajax submission form data method. Partners in need can refer to it.

Without further ado, let’s go straight to the text~

Ajax submission of form data can be divided into two types. One is to submit the form data to the background without returning results. The background processing is complete; the other is to return results, and information about the success or failure of background execution needs to be returned to the front desk.

ajax itself belongs to the category that returns results, and the success method is to handle the background return results.

Ajax submits form form data and returns results by serializing the form form data

<!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: $(&#39;#form1&#39;).serialize(),                
                success: function (result) {                    
                console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },                
                error : function() {
                    alert("异常！");
                }
            });
        }    </script></head><body><div id="form-div">
    <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></div></body></html>

Copy after login

Note: What you need to pay attention to when submitting form form data in this way The items in the form must have a name attribute. The key-value pairs obtained in the background are key=name value, value=each value. Note that whether it is an input tag, span or other tags, there must be a name attribute. There is no name attribute. This item cannot be obtained in the background. ,

The above is the entire content of this article. For more exciting content, you can refer to other columns of the PHP Chinese website! ! !

The above is the detailed content of How to submit form data with ajax? Introduction to the method of submitting form data with ajax. For more information, please follow other related articles on the PHP Chinese website!