本文目录
- 描述一次完整的Ajax请求过程
- 如何用jqueryajax请求form表单
描述一次完整的Ajax请求过程
AJAX运行过程中5种状态：
0 - (未初始化)还没有调用send()方法，
1 - (载入)已调用send()方法，正在发送请求，
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容，
4 - (完成)响应内容解析完成，可以在客户端调用了。
$.post(url,params,function(data){},“json“);
Jquery发送的post请求
参数1:请求路径 一般在页面中,发送数据到controller层
参数2:发送过去的参数 获取到页面中的一些参数
参数3:回调函数 请求成功,在controller层中对应的处理方法上面返回的数据
参数4:请求和返回的数据类型 可以是json
这个是jquery包装的post请求,原始的ajax请求比较麻烦,我一般用的都是jquery封装的ajax请求
这个方法,一定要注意最后的一个参数
《script type=“text/javascript“》
/*点击修改按钮,让市场价格,售价,库存,购买显示亮起来,可以输入数字 */
function updateSku(skuId) {
$(“#m“ + skuId).attr(“disabled“, false);
$(“#p“ + skuId).attr(“disabled“, false);
$(“#i“ + skuId).attr(“disabled“, false);
$(“#l“ + skuId).attr(“disabled“, false);
/*获取修改后的,sku中的数据 */
function addSku(skuId)
var m = $(“#m“ + skuId).attr(“disabled“, true).val();
var p = $(“#p“ + skuId).attr(“disabled“, true).val();
var i = $(“#i“ + skuId).attr(“disabled“, true).val();
var l = $(“#l“ + skuId).attr(“disabled“, true).val();
//保存
var url = “/product/updateSku.do“;
var params = {“marketPrice“ : m,“skuPrice“ : p,“stockInventory“ : i,“skuUpperLimit“ :
l,“id“ : skuId };
$.post(url,params,function(data){
alert(data.message);
《td align=“center“》
《input type=“text“ id=“m${sku.id}“ name=“marketPrice“ value=“${sku.marketPrice}“
disabled=“disabled“ size=“10“ /》
// 库存中的保存@RequestMapping(“/product/updateSku.do“)public void
updateSku(Sku sku, Model model, HttpServletResponse response) {// 修改
skuService.updateSkuByKey(sku);JSONObject jo = new JSONObject();
jo.put(“message“, “保存成功!“);// 将ajax请求,返回一个成功的信息
ResponseUtils.sendJson(response, jo.toString());}
如何用jqueryajax请求form表单
第一步：引用js
《!--这里的min是自己用js压缩工具对完整版进行的压缩并不是真正的min，所以好使--》《script type=“text/javascript“ src=“js/jquery-1.7.min.js“》《/script》《script type=“text/javascript“ src=“js/jquery.form.js“》《/script》
第二步：页面写form
《form id=“showDataForm“ action=“/024pm/f_shopUser.do?method=login“ method=“post“》 《input type=“text“ value=““ name=“name“ maxlength=“2“/》 《input type=“password“ value=““ name=“password“ maxlength=“2“/》 《input type=“submit“ value=“提交“/》《/form》《div id=“output1“ style=“width:1000px;height:200px;“》《/div》
第三步：写js调用jquery.form.js，对form表单进行ajax提交
$(document).ready(function() { var options = { target: ’#output1’, // 从服务传过来的数据显示在这个div内部 也就是ajax局部刷新 beforeSubmit: showRequest, // ajax提交之前的处理 success: showResponse // 处理之后的处理 }; $(’#showDataForm’).submit(function() { $(this).ajaxSubmit(options); return false; //非常重要，如果是false，则表明是不跳转 //在本页上处理，也就是ajax，如果是非false，则传统的form跳转。 });});function showResponse(responseText, statusText, xhr, $form) { alert(xhr.responseText+“==“+$form.attr(“method“)+’status: ’ + statusText + ’\n\nresponseText: \n’ + responseText);//xhr：说明你可以用ajax来自己再次发出请求//$form：是那个form对象，是一个jquery对象//statusText：状态，成功则为success//responseText，服务器返回的是字符串（当然包括html，不包括json）}function showRequest(formData, jqForm, options) { //formData是数组，就是各个input的键值map数组 //通过这个方法来进行处理出来拼凑出来字符串。 //formData：拼凑出来的form字符串，比如name=hera&password， //其实就是各个表单中的input的键值对， //如果加上method=XXXX，那也就是相当于ajax内的data。 var queryString = $.param(formData); alert(queryString+“======“+formData.length); for (var i=0; i 《 formData.length; i++) { alert(formData[i].value+“===============“+formData[i].name); } //jqForm，jquery form对象 var formElement = jqForm; alert($(formElement).attr(“method“)); alert($(jqForm.name).attr(“maxlength“)); //非常重要，返回true则说明在提交ajax之前你验证 //成功，则提交ajax form //如果验证不成功，则返回非true，不提交 return true;}
options对象内的值有哪些？
var options = { target: ’#output1’, data:{param1:“我自己的第一个额外的参数“},//这个参数是指通过ajax来给服务器提交除了form内部input的参数//在后台中使用String param1=req.getParameter(“param1“);获取。 // dataType: null, dataType:’json’,//这个参数值的是服务器返回的数据类型，默认的是null//也就是服务器可以默认返回字符串，然后将这些字符串放在target内部//当然还有json、xml，其中最常用的便是null和json//对于《span style=“color: #333333;“》《a href=“};