码迷,mamicode.com
首页 > Web开发 > 详细

如何使用ajax(jquery)

时间:2017-01-11 14:17:42      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:log   参数   oca   ext   post   nes   后台   url   local   

以下是我第一次工作时写的ajax:

 1 $.ajax({
 2 
 3         url: "/spinweb/store/storeHome.do",
 4         dataType: ‘json‘,
 5         data: {
 6             "pageSize": a
 7         },
 8         type: ‘post‘,
 9 
10         success: function(data) {
11             console.log(data)
12             var pic = data.data
13             for(var i = 0; i < pic.length; i++) {
14                 if(pic[i]) {
15                     if(pic[i].head) {
16 
17                         $(".shop-list").eq(i).find("img").attr("src", imgUrl + pic[i].head)
18                     } else {
19                         $(".shop-list").eq(i).find("img").attr("src", "")
20                     }
21 
22                     $(".shop-list").eq(i).find(".shop-l-info").html(pic[i].businessstorename)
23                     $(".shop-list").eq(i).find(".storeid").html(pic[i].businessstoreid)
24 
25                 } else {
26                     $(".shop-list").eq(i).find("img").hide()
27                     $(".shop-list").eq(i).find(".shop-l-info").html("")
28                     $(".shop-list").eq(i).find(".storeid").html("")
29                 }
30 
31             }
32 
33             $(".shop-list").click(function() {
34 
35                 localStorage.shopid = $(this).find(".storeid").eq(0).text()
36                 localStorage.shopname = $(this).find(".shop-l-info").eq(0).text()
37 
38                 window.open("html/company-msg.html")
39             })
40 
41         },
42 
43     });

基本需要注意的有三点:

1.url

 这个是后端给的接口地址,必须正确书写。【并且,确定没有存在跨域问题】。

如果你的代码是在本地服务器上启动的,那么因为和公司服务器并不在一个域名上,所以无法访问。解决方法是将代码上传到公司服务器或者找找跨域软件解决。

 

2. data

这里可以放对象或者字符串两种格式都可以。但是推荐使用对象方式,因为当参数多的时候,不容易漏写或者多写。

 

3. 成功后返回的数据

当请求成功后,你会得到一组json数据如上面

 success: function(data)

的data。这些数据根据需要使用js或者jquery进行各种各样的作用,上图就是循环的将后台获得的商品信息填写到对应的位置。

如何使用ajax(jquery)

标签:log   参数   oca   ext   post   nes   后台   url   local   

原文地址:http://www.cnblogs.com/thestudy/p/6273318.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!