如何使用ajax(jquery)

Posted 起个好名字

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用ajax(jquery)相关的知识,希望对你有一定的参考价值。

以下是我第一次工作时写的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)的主要内容,如果未能解决你的问题,请参考以下文章

几个非常实用的JQuery代码片段

jQuery高级Ajax

使用 Jquery 的同步“Ajax”调用似乎不起作用

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

前端面试题之手写promise