Question

描述一次完整的Ajax请求过程

Answer 1

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()); }

Answer 2

$.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);
},"json");
}
</script>
-------------------------------------------------------------------------------
<td align="center">
<input type="text" id="m${sku.id}" name="marketPrice" value="${sku.marketPrice}"
disabled="disabled" size="10" />
</td>
<td align="center">
<input type="text" id="p${sku.id}" name="skuPrice" value="${sku.skuPrice}"
disabled="disabled" size="10" />
</td>
<td align="center">
<input type="text" id="i${sku.id}" name="stockInventory" value="${sku.stockInventory}"
disabled="disabled" size="10" />
</td>
<td align="center">
<input type="text" id="l${sku.id}" name="skuUpperLimit" value="${sku.skuUpperLimit}"
disabled="disabled" size="10" />
</td>
-----------------------------------------------------------------------------------------------------------
// 库存中的保存 @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()); }