SpingMVC+AJAX+jquery表单数据交互

Posted 2020-10-11 uMBrELlAmRx

一直在思考为什么ajax可以传数据到服务端

jsp文件

 

<form role="form" action="" method="post" >
                            <div class="form-group">
                                <input type="text" name="username" placeholder="用户名..."
                                       class="form-username form-control" id="registerInputUsername">
                            </div>
                            <div class="form-group">
                                <input type="password" name="password" placeholder="密码..."
                                       class="form-password form-control" id="registerInputPassword">
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn" id="registerButton">注册</button>
                            </div>
                        </form>

重点在于input里的name标签，这个标签决定表单的数据能否提交到服务器，如果没有这个标签，那么将无法提交。

当绑定登录按钮点击事件后，每次点击，分析HTTP请求会发现

General
　　Request URL:http://localhost:8080/register
　　Request Method:POST
　　Status Code:200 OK
　　Remote Address:127.0.0.1:8080
　　Referrer Policy:no-referrer-when-downgrade
Response Headers
　　Content-Language:zh-CN
　　Content-Length:6023
　　Content-Type:text/html;charset=UTF-8
　　Date:Tue, 17 Oct 2017 14:48:05 GMT
　　Server:Apache-Coyote/1.1
Request Headers
　　Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
　　Accept-Encoding:gzip, deflate, br
　　Accept-Language:zh-CN,zh;q=0.8
　　Cache-Control:max-age=0
　　Connection:keep-alive
　　Content-Length:30
　　Content-Type:application/x-www-form-urlencoded
　　Cookie:Idea-d08954fc=4c071045-2571-42f1-be8f-4c1f2be8be8a; Webstorm-167e2d55=b999dc51-0bbe-4cc2-a840-95e8b7fbeedc; 
　　Idea-386a81db=fc5e5d50-e0f8-455f-8ac7-14e1eeeb6216; Pycharm-af3e934=bbdc7249-4985-4d7f-b9a2-af8a87cf357c; 
　　Hm_lvt_512065947708a980c982b4401d14c2f5=1506428586; JSESSIONID=E967977785DDF8CA511EB5D4D272B50F
　　Host:localhost:8080
　　Origin:http://localhost:8080
　　Referer:http://localhost:8080/register
　　Upgrade-Insecure-Requests:1
　　User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.104 Safari/537.36
　　Form Data
　　view source
　　view URL encoded
Form Data
　　username:admin
　　password:123456

Form Data，指的是页面有表单的情况下的HTTP请求，可以看成是键值对，username，password均由input标签里面的name属性所指定，与其他的类似AJAX里的data没有任何关系