jquery 中的ajax总结

最新推荐文章于 2021-05-10 11:33:25 发布

bit-caffe

最新推荐文章于 2021-05-10 11:33:25 发布

阅读量1.6k

点赞数 1

分类专栏： Web前端

本文链接：https://blog.csdn.net/qh_java/article/details/65445146

版权

Web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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页面

<%@ 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>
<!-- zui -->
<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>
	<!--test begin-->
	<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>

	<!--test  end  -->
</body>
<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
<script type="text/javascript" src="../../../js/jquery-2.1.3.min.js"></script>
<!-- ZUI Javascript组件 -->
<script src="../../../dist/js/zui.min.js"></script>
<script src="../../../dist/lib/datetimepicker/datetimepicker.js"></script>
<script src="../../../js/jd/index.js"></script>
</html>

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代码控制层：

@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);
	}

四、$.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()方法的处理是一样的，接收请求参数，后台处理数据，返回数据到请求方法，回调函数中处理返回的信息！

$.getJSON()在跨域问题中的应用：http://blog.csdn.net/qh_java/article/details/50193583