jquery 中的ajax总结

jquery对ajax请求进行了封装，在jquery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()、$.post()方法而第3层是$.getScript()和$.getJSON()方法，这篇文章就来看看这些方法

一、load()方法

1、load()方法能远程获取页面并插入到DOM中指定的节点。

2、load()方法结构：load(url[,data][,callback]); url请求地址、data请求参数、callback回调函数，其中data和callback是可选的！

3、demo展示

（1）、原始页面：

jsp页面

<span style="font-size:14px;"><%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>首页</title>
<link href="../../../dist/css/zui.min.css" rel="stylesheet">
<link href="../../../dist/lib/datetimepicker/datetimepicker.css"
rel="stylesheet">
</head>
<body style="background-color: #fcfcfc;">
<div class="container">
<div class="panel">
<div class="panel-heading" style="text-align: center;">首页</div>
<div class="panel-body">
<div class="form-horizontal">
<div style="margin-bottom: 1%;">
<a href="stocklist.do" target="blank"> <i
class="icon icon-link"></i>库存查询
</a>
</div>
<div style="margin-bottom: 1%;">
<a href="priceStock.do" target="blank"> <i
class="icon icon-link"></i>库存价格查询
</a>
</div>
</div>
</div>
</div>
</div>
<div>
<input type="button" id="testload" name="testload" value="load" /> <input
type="button" id="testget" name="testget" value="get" /> <input
type="button" id="testpost" name="testpost" value="post" /> <input
type="button" id="testscript" name="testscript" value="script" /> <input
type="button" id="testjson" name="testjson" value="json" />
</div>
<div id="showinfo">
<ul>
<li id="id1"></li>
</ul>
</div>
</body>
<script type="text/javascript" src="../../../js/jquery-2.1.3.min.js"></script>
<script src="../../../dist/js/zui.min.js"></script>
<script src="../../../dist/lib/datetimepicker/datetimepicker.js"></script>
<script src="../../../js/jd/index.js"></script>
</html></span>

js代码:

$(function() {
$("#testload").on("click", function() {
myobj.fload();
});
});
var myobj = {
fload : function() {
var obj = {};
$("#showinfo").load("index.do", {
name : "zhangsan",
age : "21"
}, function(responseText, textStatus, XMLHttpRequest) {
$("#id1").html("status：" + textStatus);
console.log(restext);
});
},
fget : function() {
},
fpost : function() {
},
fscript : function() {
},
fjson : function() {
}
}

后台java代码即controller层：

/**
* 首页
* @param request
* @param response
* @return
*/
@RequestMapping(value="index")
public String test(HttpServletRequest request, HttpServletResponse response) {
return "jd/index";
}

（2）、页面展示：

访问的页面

当我们单击load按钮时做的事情就是调用load方法发送请求到后台，然后把index.jsp这个整个的页面返回到laod方法，再将返回的这个页面加载到当前的index页面指定的div下，效果如下：

返回加载后的页面

还发现没，下面多了个status:success 这是在load方法的回调函数中进行的操作：

js代码如下：

fload : function() {
var obj = {};
$("#showinfo").load("index.do", {
name : "zhangsan",
age : "21"
}, function(responseText, textStatus, XMLHttpRequest) {
$("#id1").html("status：" + textStatus);
console.log(restext);
});
},

其中的function就是load方法的回调方法，其中有三个参数即load方法请求返回的内容、请求状态和XMLHttpRequest对象！

发现没浏览器页面console控制台输出的就是整个index页面，因为我们在load方法的回调函数中打印了返回的信息！

ok这样就测试了一个load方法的demo，下面来看看，url中添加过滤条件的情况：

js代码：

fload : function() {
var obj = {};
$("#showinfo").load("index.do .container", {
name : "zhangsan",
age : "21"
}, function(responseText, textStatus, XMLHttpRequest) {
$("#id1").html("status：" + textStatus);
console.log(responseText);
});
}

在load方法的请求地址中添加了过滤条件即class="container"添加这个过滤条件就是只把这个页面中class=“container”的部分加载到页面中。

注意：url和过滤条件之间是有空格的！

load方法小总结：

1、请求方法load()中的三个参数，只有url请求地址是必填的，其他两个都可以选填

2、第二个参数即请求参数，参数个是{key:value,key2:value}

3、回调函数，这个函数的的三个参数值请求返回的内容，请求状态，以及XMLHttpRequest对象，这个回调函数是在请求完成后触发的，和请求成功失败没关系！

4、load()方法是将一个页面的内容添加到指定的DOM的元素下，所以在js中调用load(）方法时应该是$("#id").load(url)DOM中的某个节点元素而不是$.load(url);

5、load()方法传递方式是按照data参数来决定的，如果没有参数传递则使用get方式的如果有参数传递则是使用post方式

二、get()方法

1、$.get()方法使用get方式进行异步请求。

2、$.get()方法结构：$.get(url[,data][,callback][,type]);url为请求地址、data请求参数可选、callback请求成功回调函数可选、type参数返回格式可选！

3、demo

fget : function() {
var obj={};
obj.param="hello gettest!";
//get和load不同，只有在请求成功的情况下才会触发回调函数，回调函数的参数只有两个即请求返回的内容和请求状态，
$.get("gettest.do",obj,function(responseText,textStatus){
alert("responseText:"+responseText +" textStatus:"+textStatus);
},"text");
}

4、java代码控制层

@RequestMapping(value="gettest")
public void loadtest(HttpServletRequest request, HttpServletResponse response){
String param= request.getParameter("param");
System.out.println("loadtest:"+param);
setServletResponse(response);
out.print("load"+param);
}

5、运行结果：

这是一个完整的$.get()demo,

$.get()总结：

1、get请求的回调函数只有两个参数即请求返回的信息和请求状态！

2、只有请求成功后才会调用回调函数而不像load方法不管成功还是失败都会调用回调函数！

3、Type参数，定义了请求返回的数据格式，按照自己需求进行定义支持如下几种格式：xml、html、script、json、text！

三、$.post()方法

1、$.post()和$.get()两种方法除了传递参数的方式不同即一个是get方法一个是post方式其他的都一样！

2、js 的demo：

fpost : function() {
var obj={};
obj.param="hello gettest!";
$.post("posttest.do",obj,function(responseText,textStatus){
alert("responseText:"+responseText +" textStatus:"+textStatus);
},"text");
}

3、java代码控制层：

<span style="font-size:14px;">@RequestMapping(value="posttest")
public void loadtest(HttpServletRequest request, HttpServletResponse response){
String param= request.getParameter("param");
System.out.println("loadtest:"+param);
setServletResponse(response);
out.print("load"+param);
}</span>

四、$.getScript()
不好意思这个自己demo访问不了！！！

五、 $.getJSON()方法

1、$.getJSON()方法格式：$.getJSON(url,callback); 即请求地址和回调函数,回调函数中处理返回的结果！

2、$.getJSON()方法demo：

（1）、js代码

fjson : function() {
$.getJSON("jsontest.do",function(data){
//返回json格式的数据
var jsonObj = data;
var name = jsonObj.name;
var age = jsonObj.age;
console.log("name:"+name +" age:"+age);
});
}

（2）、java代码控制层

@RequestMapping(value="jsontest")
public void loadtest(HttpServletRequest request, HttpServletResponse response){
setServletResponse(response);
JSONObject json = new JSONObject();
json.put("name", "whd");
json.put("age", 12);
out.print(json.toString());
}

（3）、运行结果：

ok 到此jquery的各种ajax请求方法都ok了，当然还有$.ajax()方法，我们用的也是比较多的，这里就不说了！

六、$.each()函数

1、$.each()函数不同于jquery对象的each()方法，他是一个全局函数，不操作jquery对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容！

2、demo展示：

getaddress1:function(id){
$.ajax({
type:'post',
url:'jdaddress.do',
dataType:'json',
async:false,
success:function(data){
var json=data;
var text='<option value=0>省份</option>';
$.each(json, function(i, val) {
text =text+'<option value='+val+'>'+i+'</option>';
});
console.log("text:"+text);
$("#province").empty();
$("#province").append(text);
}
});
}

返回数据即data即json的格式为：

{
"北京": 1,
"上海"：2,
"黑龙江": 10
}

返回的数据也就是一个json对象，再来看$.each(json,function(i,val){ })在json为对象时i就是json的key而val就是json的key对应的value值。
如果json是个数组则i就是数组中的索引而val就是数组中索引对应的值即有可能就是一个json对象！

七、五种方法的js

$(function() {
//方法触发调用
$("#testload").on("click", function() {
myobj.fload();
});
$("#testget").on("click", function() {
myobj.fget();
});
$("#testpost").on("click", function() {
myobj.fpost();
});
$("#testscript").on("click", function() {
myobj.fscript();
});
$("#testjson").on("click", function() {
myobj.fjson();
});
});
var myobj = {
// load方法
fload : function() {
var obj = {};
$("#showinfo").load("index.do .container", {
name : "zhangsan",
age : "21"
}, function(responseText, textStatus, XMLHttpRequest) {
$("#id1").html("status：" + textStatus);
console.log(responseText);
});
},
// get方法
fget : function() {
var obj = {};
obj.param = "hello gettest!";
// get和load不同，只有在请求成功的情况下才会触发回调函数，回调函数的参数只有两个即请求返回的内容和请求状态，
$.get("gettest.do", obj,
function(responseText, textStatus) {
alert("responseText:" + responseText + " textStatus:"
+ textStatus);
}, "text");
},
// post方法
fpost : function() {
var obj = {};
obj.param = "hello gettest!";
$.post("posttest.do", obj,
function(responseText, textStatus) {
alert("responseText:" + responseText + " textStatus:"
+ textStatus);
}, "text");
},
// script方法
fscript : function() {
$
.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js");
},
// json方法
fjson : function() {
$.getJSON("jsontest.do", function(data) {
// 返回json格式的数据
var jsonObj = data;
var name = jsonObj.name;
var age = jsonObj.age;
console.log("name:" + name + " age:" + age);
});
}
}

这里只给出js不给java是因为他们和我们平时些的$.ajax()方法的处理是一样的，接收请求参数，后台处理数据，返回数据到请求方法，回调函数中处理返回的信息！

jquery 中的ajax总结

猜你喜欢