如何使用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进行各种各样的作用,上图就是循环的将后台获得的商品信息填写到对应的位置。

时间: 2024-11-03 20:55:11

如何使用ajax(jquery)的相关文章

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html><html>    <head>        <meta c

HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 jQuery版本:1.9.1 后台Servlet代码这里就省略了,使用的是 AJAX请求遭遇未登录和Session失效的解决方案 这篇文章里面的后台Servlet.所以这里只看前台的JS代码. 首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象:FormData  FormData 对象可以使用append 方法进行 key - value的数据添加,与以前我们常用的json不同的就是可以异

python web框架企业实战详解(第六期)\第三课时-ajax&amp;jquery&amp;webpy

main.py __author__ = 'Liao' import web import time urls = ( '/gettime','gettime', '/(.*)', 'hello' ) app = web.application(urls, globals()) class gettime: def GET(self): asctime=time.asctime() print asctime return asctime def POST(self): return self.

HTML5+Ajax+Jquery调用Google搜索API实现搜索引擎,支持web,image,news,vedio4种模式!

原文:HTML5+Ajax+Jquery调用Google搜索API实现搜索引擎,支持web,image,news,vedio4种模式! 源代码下载地址:http://www.zuidaima.com/share/1550463589878784.htm web,image,news,vedio4种模式! 已经拿javaniu作出测试,下载即可查看 

Ajax+JQuery留言特效

原文:Ajax+JQuery留言特效 源代码下载地址:Ajax+JQuery留言特效

MVC中处理表单提交的方式(Ajax+Jquery)

MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t"> <div class="col-md-6"> <div class="form-group"> <label class="col-sm-3 control-label">订单编号:</la

前端学习笔记--9/5~13/5 Ajax, jQuery

周末没有写本周的总结,今天再补上.顺别计划一下这周的学习内容. 上周说的计划本周做一些HTML+CSS+JS的小demo,但是我并没有去做.准确的说,上周基本上我只有星期一到星期三是全力开赴学习的,星期四的晚上熬了一天的夜,从此一直到今天都没有觉得补回来了,依旧是这么的困.周末也是因为这个原因,所以几乎没有学习,就在家睡过去了.果然是人老了精神跟不上了么.气哭. 赶紧开始总结吧.... Ajax JS和ajax jQuery之间的关系. 1. JS是一门前端语言 2. ajax是一门技术,提供一

ajax jquery 上传文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/jsp/commons/includes.jsp"%> <html> <head> <title>${systemName }</title> <style t

ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要将后台数据库上的一些数据以可视化的方法显示到前端,找来找去,发现百度开发的这套图表工具库还不错,网上搜索了一下相关的教程,也算是实现了较为简单的demo.于是写下来,记录一下. ECharts ECharts是国人开发的一套前端的图表工具库,使用起来超方便,也很简单(当然了,前提是理解了其工作原理之

ajax+jquery+ashx如何实现上传文件

第一:建立Default.aspx页面 <html> <head runat="server"> <title>ajax图片上传</title> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery.form.js" t