1、直接干货
ajax很简单jquery有很好的支持,原生js就不写了。总的说常用的有3个方法
$.post
$.get
$.ajax
具体参数参考教程http://www.runoob.com/jquery/ajax-post.html
$.get\$.post主要4个参数url,params,callback,type用法在教程很详细我就不说了
主要说的有1点,get方法很方便,可以用,post方法尽量少用,在spring框架下接收参数不是很舒服,不能直接用对象接收参数。
在项目应用中常要这样接收参数
public String login(@RequestBody User user, HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException{
直接用$.post接收不到User对象,只能单个传参,很麻烦,所以这里推荐用$.ajax方法
2、
function submitForm(){
/*<![CDATA[*/
var url = /*[[@{/user/login}]]*/null;
if ([[${redirectURL}]] != null){
var redirectURL = "?redirectURL="+/*[[${redirectURL}]]*/;
url = url + redirectURL;
}
var params = $("#userForm").serializeJson();
if ($("#userMobile").val() == ""){
alert("手机号为空。");
$("#userMobile").focus();
return;
}
if ($("#userPassword").val() == ""){
alert("密码为空。");
$("#userPassword").focus();
return;
}
$.ajax({
type:"POST",
url:url,
dataType:"json",
contentType:"application/json;charset=utf-8",
data:params,
success:function(result){
if (result.redirectURL != undefined){
location.href = result.redirectURL;
}else{
if (result.status == "200"){
location.href = "http://localhost";
}else{
alert(result.message);
}
}
}
});
/*]]>*/
}
代码中标红的就是将form表单中的数据对象化,这样上面的服务器代码就可以直接用对象接收了,很方便。
给出js的serializeJson 代码如下:
// 把json字符串封装成json对象
(function($) {
$.fn.serializeJson = function() {
var serializeObj = {};
var array = this.serializeArray();
var str = this.serialize();
$(array).each(
function() {
if (serializeObj[this.name]) {
if ($.isArray(serializeObj[this.name])) {
serializeObj[this.name].push(this.value);
} else {
serializeObj[this.name] = [
serializeObj[this.name], this.value ];
}
} else {
serializeObj[this.name] = this.value;
}
});
return JSON.stringify(serializeObj);
};
})(jQuery);