Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的差异了。
$.ajax({
url:'/hwzxcms/nongli.jspx', //提交地址
dataType:"json",
success:function(data){ //回调方法 data是返回的数据
var rili=data.nongli;
$("span.f_l").empty();
$("span.f_l").append(rili);
}
});
实例:
前台:
$.ajax({
url: "${ctx}/index/login",
data: { userName: userName ,password:password},
type: "post",
dataType:'json',
success: function (data) {
if(data.code==0)
{
$("#formUpload").remove();
}
else
{
alert(data.msg);
location.reload();
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}
});
后端:
@RequestMapping(value = "/login", method = RequestMethod.POST)
public @ResponseBody Result login(HttpServletRequest request,HttpServletResponse response,String userName ,String password) {
return ResultUtil.success()
}
$.ajax({
url: contextRoot + '/mvc/wagePerPriceConfig/deleteFile',
data: {"file":data.data.path},
method: 'post',
dataType: "json",
success: function (data, status) {
}
});
@PostMapping(value = "deleteFile")
public Result deleteFile(String file,HttpServletRequest request,HttpServletResponse response) {
return ResultUtil.success();
}
$.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()
一、$.ajax的一般格式
?
1 2 3 4 5 6 7
$.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType });
二、$.ajax的参数描述
参数 描述
url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType 可选。规定预期的服务器响应的数据类型。
默认执行智能判断(xml、json、script 或 html)。
三、$.ajax需要注意的一些地方:
1.data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断。
2.$.ajax只提交form以文本方式,如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit/<file>
四、$.ajax我的实际应用例子
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
//1.$.ajax带json数据的异步请求 var aj = $.ajax( { url:'productManager_reverseUpdate',// 跳转到 action data:{ selRollBack : selRollBack, selOperatorsCode : selOperatorsCode, PROVINCECODE : PROVINCECODE, pass2 : pass2 }, type:'post', cache:false, dataType:'json', success:function(data) { if(data.msg =="true" ){ // view("修改成功!"); alert("修改成功!"); window.location.reload(); }else{ view(data.msg); } }, error : function() { // view("异常!"); alert("异常!"); } }); //2.$.ajax序列化表格内容为字符串的异步请求 function noTips(){ var formParam = $("#form1").serialize();//序列化表格内容为字符串 $.ajax({ type:'post', url:'Notice_noTipsNotice', data:formParam, cache:false, dataType:'json', success:function(data){ } }); } //3.$.ajax拼接url的异步请求 var yz=$.ajax({ type:'post', url:'validatePwd2_checkPwd2?password2='+password2, data:{}, cache:false, dataType:'json', success:function(data){ if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间 { textPassword2.html("业务密码不正确!/<font>"); $("#validatePassword2").val("pwd2Error"); checkPassword2 = false; return; } }, error:function(){} }); //4.$.ajax拼接data的异步请求 $.ajax({ url:'/kc/kc_checkMerNameUnique.action', type:'post', data:'merName='+values, async : false, //默认为true 异步 error:function(){ alert('error'); }, success:function(data){ $("#"+divs).html(data); } });
Ajax返回集合类型数据,并回填到div中
$.ajax({
url: '${ctx}/wm/wmBorrow/status1',
type: 'post',
dataType: 'json',
timeout: 1000,
beforeSend: LoadFunction, //加载执行方法
error: erryFunction, //错误执行方法
success: succFunction //成功执行方法
})
function LoadFunction() {
$("#d1").html('加载中...');
}
function erryFunction() {
alert("error");
}
function succFunction(tt) {
$("#d1").html('');
var json = eval(tt); //数组
$.each(json, function (index, item) {
//循环获取数据
var s1 = json[index].toolBy.name;
var s2 = json[index].status;
var s3 = json[index].outUser.name;
var s4 = json[index].outDate;
var s5 = json[index].returnDate;
var s6 = json[index].purpose;
var s7 = json[index].useAddress;
var div="
- 状态:'${fns:getDictLabel("+s2+",'borrow_status', 888)}'/<font>
- 借出人:"
+s3+"
- 借出日期:"+s4+"
- 归还日期:"+s5+"
- 借出用途:"+s6+"
- 借出地点:"+s7+"
$("#d1").html(div);
});
}
});
閱讀更多 xinsharon 的文章