怎么写ajax，之前也不是很懂，后来在项目中接触几次后也就差不多了。

首先来个场景，有一个页面的价格需要调用ajax的接口来拉取，拉取的原理是，每个商品的商品id发给后台对应拉到每个商品的价格然后填写。

于是我定义了一个Prize的函数：function Prize() {}。

然后首先第一步，取到每个商品的id并且拼在一起一次性请求：（这个怎么拼看ajax的发送规则，比如这个例子是商品id,使用”,”分割）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var _value = "";

		var selector = $('.list li');

		selector.each(function(_idx) {

			if (_idx == 0) {

				_value = $(this).attr('skuid');

			} else {

				_value = _value + ',' + $(this).attr('skuid');

			}

			value = $.trim(value);

		})

第二步就是发送ajax请求并返回得到的价格：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$.ajax({

			type: 'GET',

			url: 'ajax地址',

			data: {

				'skuIds': _value

			},

			dataType: 'jsonp',

			success: function(data) {

				console.log(data)

				

			}

		})

第三步就是请求成功后对页面的输出，success里的函数就是写成功后要做的事：

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
success: function(data) {

				console.log(data)

				selector.each(function(_index) {

					var sku = .trim((this).attr('skuid'));

					for (var i = 0; i < data.data.length; i++) {
 //for循环是遍历每一个商品id，然后if语句中要多一步验证返回的商品id和当前的id是不是同一个，如果是则写入价格， data.data[i].Price的Prize是因为返回字段的定义，有Prize字段存储，具体看ajax返回的内容进行程序编写。

						var eachData = data.data[i];

						var eachprice = data.data[i].Price;

						if (sku == eachData.skuId) {

							(this).find('.price  .price-cur').html("" + eachprice);

						}

					}

				})

			}

顺便说下each方法和$.each()函数，我最喜欢用例子来理解了：

1
2
3
4
5
$('.tag').each(function(){
    if($(item).find('span').text()!=''){
        $(item).show()'
    }
})
1
2
3
4
5
$.each($('.tag-discount'),function(index,item){
    if($(item).find()'span'.text()!=''){
        $(item).show();
    }
})

这两个的效果一样，但是$.each()函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，把对象作为第一个参数，以一个回调函数作为第二个参数：第一个为对象成员或者数组索引，第二个为对应变量或者内容。