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 的文章
