ajax使用小记

本是古典何须时尚 2022-12-28 06:24 170阅读 0赞

## 第一种方式serialize表单序列化 ##

//登录判断，userName、password是否符合注册规范，如果不符合报错(防止直接注入)
            $("#btn_register").click(function () { 
                //要求两个值正确，才做提交
                if (checkuserName() && checkPassword()) { 
                    //ajax提交
                    $.post("/OnlineMall/system/user/register", $("#registerForm").serialize(),
                        function (data) { 
                            //{code:1,data:成功}
                            if (data.status == true) { 
                                alert("注册成功，" + userName + "，欢迎您的使用")
                                window.location = "login.html";
                            } else { 
                                //注册失败，错误提示信息
                                $("#errorMsg").html(data.message);
                            }
                        }, "json");
                } else { 
                    $("#errorMsg").html("用户名或密码不能小于6位");
                }
            })

controller

//注册
        @PostMapping(path = "register")
        public Object register(User user) { 
            System.out.println("register user=======" +user);
    		//逻辑判断。。。
    		
            userService.saveUser(user);
            return Result.init(true,StatusCode.SUCCESS, "新增成功");
        }

## 第二种方式，@RequestBody ##

//登录判断，userName、password是否符合注册规范，如果不符合报错(防止直接注入)
                $("#btn_register").click(function () { 
            //要求两个值正确，才做提交
            if (checkuserName() && checkPassword()) { 
                //ajax提交
                $.ajax({ 
                    url: "system/user",
                    //async: true,
                    type: "post",
                    dataType: "json",   //返回数据类型
                    contentType: "application/json;charset=utf-8", //请求体的参数类型
                    //data: $("#registerForm").serialize(), //表单序列化userName=12&email=1@&password=123
                    data: JSON.stringify($("#registerForm").serializeObject()),
    
                    success: function (data) { 
                        if (true == data.status) { 
                            $("#errorMsg").html("");
                            alert("注册成功，" + userName + "，欢迎您的使用")
                            window.location = "login.html"	//跳登录页面
                        } else { 
                            //显示在界面上
                            $("#errorMsg").html(data.message);
                        }
                    },
                    error: function () { 
                        alert("服务器发生了错误Error")//比如找不到servlet
                    }
                });
            } else { 
                $("#errorMsg").html("用户名或密码不能小于6位");
            }
        })

使用serialize表单序列化之后得到的是键值对的形式 ：`k1=v1&k2=v2&k3=v3...`，通过编写jquery扩展方法将表单序列化成json数据格式：`{"k1":"v1","k2":v2,"k3":"v3"}`

前台ajax就通过调用serializeObject方法来传参数

data: JSON.stringify($("#registerForm").serializeObject()),

但是这样只能获取到所有的`<input>`标签数据，如果想获取下拉框`<select>`等的数据，需要单独获取，然后把获取到的值拼接进去。

//获取表单的序列化对象
    	var data=$("#fm").serializeObject();
    	//通过JSON.stringify()将 JavaScript 对象转换为字符串。
    	JSON.stringify(data);
    	//可以通过对象.键 = 值的方式进行修改（如果不存在则添加）
    	data.password="123456";	//password键已存在，修改password的值为123456
    
    	//获取下拉框的值
    	var select=$("#select").val();	//获取下拉框的值
    	data.select=select;	//再将下拉框的值拼接进去就行

后台用`@RequestBody`

@PostMapping
        public Object saveOne(@RequestBody User user) {    //@RequestBody将json转bean赋值
            System.out.println("user=======" +user);
            //逻辑判断.. 
            userService.saveUser(user);
            return Result.init(true,StatusCode.SUCCESS, "新增成功");
        }

## 第三种，val取值，然后拼接 ##

data:{ "userName":userName,"password":password, "array[]":array},//传递数组参数时，参数名需要加上[],如 "array[]"，否则后台获取不了

//登录判断，userName、password是否符合注册规范，如果不符合报错(防止直接注入)
    $("#btn_register").click(function () { 
            //要求两个值正确，才做提交
            if (checkuserName() && checkPassword()) { 
           	    var userName = $("input[name='userName']").val()
                var password = $("input[name='password']").val()
                //ajax提交
                $.ajax({ 
                    url: "system/user",
                    //async: true,
                    type: "post",
                    dataType: "json",   //返回数据类型
                    contentType: "application/json;charset=utf-8", //请求体的参数类型
    				data:{ "userName":userName,"password":password},//传递数组参数时，参数名需要加上[],如 "array[]"，否则后台获取不了
                    success: function (data) { 
                        if (true == data.status) { 
                            $("#errorMsg").html("");
                            alert("注册成功，" + userName + "，欢迎您的使用")
                            window.location = "login.html"	//跳登录页面
                        } else { 
                            //显示在界面上
                            $("#errorMsg").html(data.message);
                        }
                    },
                    error: function () { 
                        alert("服务器发生了错误Error")//比如找不到servlet
                    }
                });
            } else { 
                $("#errorMsg").html("用户名或密码不能小于6位");
            }
        })

表单序列化  
[https://www.cnblogs.com/goloving/p/7417577.html][https_www.cnblogs.com_goloving_p_7417577.html]

[https_www.cnblogs.com_goloving_p_7417577.html]: https://www.cnblogs.com/goloving/p/7417577.html