SpingMVC+AJAX+jquery表单数据交互

一直在思考为什么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没有任何关系

 用Json之后，在服务器端一直打印的是null，为什么会这样？

415错误：可能是JavaBean的属性与Json是数据格式不匹配，属性个数不一致？

要解决为什么打印的是null，首先要知道为什么客户端和服务器之间是怎么传递数据的，这两者之间是通过TCP协议建立连接，然后发送数据流，知道这个原理，我们就可以在Controller里编写数据流方法来看传递过来的究竟是什么？

BufferedReader br;
        try {
            br = request.getReader();
            String str, wholeStr = "";
            while((str = br.readLine()) != null){
                wholeStr += str;
            }
            System.out.println(wholeStr);
        } catch (IOException e) {
            e.printStackTrace();
        }

当使用Json时，如

function Json(){

    var userP = {  
            "name" : "admin",  
            "password" : "999"  
    };
    $.ajax({
        type:'post',
        url:'toLogin',
        contentType:'application/json;charset=utf-8',
        data:JSON.stringify(userP),
        success:function(data){//返回json结果
            alert(data.name);
        }       
    }); 
}

Controller端打印的是，{"name" : "admin", "password" : "999"}

如果不使用Json.stringify函数，那么直接使用data:userP的话，会导致错误，在博主浏览器上会出现假死崩溃现象，不知道为什么会出现这种情况有待考究

反正springmvc端接收的只能是json串而不能是json对象，记住这一点就好了

通过Json传值进入Controller的好处就是可以直接通过@RequestBody 将Json的键值对直接注入到JavaBean，但是好像属性的个数如果不匹配就好像会出现415错误，不知道是不是这样，有待考究。

个人感觉这个有点不太灵活，有的时候并没有必要传很多的属性，只传POJO的一小部分属性呢？

那么可以使用ajax对Form表单的序列化

$.ajax({
                url:"toLogin",
                type:"post",
                data:$("#UserForm").serialize(),
                contentType:"application/x-www-form-urlencoded",
                success:function(response){
return;}

UserForm是user的表单id， ("#UserForm").serialize()这样做将数据流变成urlencoded，即上面所指定的

contentType:"application/x-www-form-urlencoded",

如果表单里有两个输入框input，name属性分别是username，password，

那么提交后在Controller端将打印 username=admin&password=999