关于Jquery的Ajax异同步的问题探讨

来源：动视网责编：小OO 时间：2020-11-27 19:57:56

关于Jquery的Ajax异同步的问题探讨

1.$.get(url.[data].[callback].[type])；只能是异步。2.$.post(url.[data].[callback].[type])；只能是异步。参数列表。url：代表请求的服务器端地址。data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）。callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）。type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）。常用的返回类型：text、json、html等。.$.ajax({ option1：value1，option2：value2...} )。常用的option有如下：async：是否异步，默认是true代表异步。

推荐度：

点击下载本文 文档为doc格式

导读1.$.get(url.[data].[callback].[type])；只能是异步。2.$.post(url.[data].[callback].[type])；只能是异步。参数列表。url：代表请求的服务器端地址。data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）。callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）。type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）。常用的返回类型：text、json、html等。.$.ajax({ option1：value1，option2：value2...} )。常用的option有如下：async：是否异步，默认是true代表异步。

本文主要为大家分享一篇关于Jquery的Ajax异同步的问题探讨，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧。

1. $.get(url, [data], [callback], [type])；只能是异步

2. $.post(url, [data], [callback], [type])；只能是异步

参数列表：

url：代表请求的服务器端地址；

data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）；

callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）；

type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换），

常用的返回类型：text、json、html等。

. $.ajax({ option1:value1,option2:value2... } )

常用的option有如下：

async：是否异步，默认是true代表异步；

data：发送到服务器的参数，建议使用json格式；

dataType：服务器端返回的数据类型，常用text和json；

success：成功响应执行的函数，对应的类型是function类型；

type：请求方式，POST/GET；

url：请求服务器端地址。

接下来做一个实例演示：

AjaxServle.java

package ajax;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	//响应请求
	//返回参数会json类型的字符串，前端jquery会自动将字符串解析为json对象
	response.getWriter().write("{\"name\":\"Tom\",\"age\":18}");
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	doGet(request, response);
	}

}

TestAjax.html

<!DOCTYPE html>
<html>
 <head>
 <title>Jquery的Ajax异同步</title>
 <meta name="content-type" content="text/html; charset=UTF-8">
 <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
 <script>
 
 	//Get异步响应
 	function fn1(){
	 	$.get(
	 	"/WEB/ajaxServlet", //访问的资源地址
	 	{"name":"zhangsan","age":22}, //请求服务器端的参数,可以是json格式 
	 	function(responseData) { //响应成功后执行的函数
	var str="name: "+responseData.name+"; age: "+responseData.age;
	 	document.getElementById("input1").value=str;
	 	}, 
	 	"json" //返回数据的格式
	 	)
 	}
 	
 	//Post异步响应
 	function fn2(){
 	$.post(
	 	"/WEB/ajaxServlet", //访问的资源地址
	 	{"name":"zhangsan","age":22}, //请求服务器端的参数,可以是json格式 
	 	function(responseData) { //响应成功后执行的函数
	var str="name: "+responseData.name+"; age: "+responseData.age;
	 	document.getElementById("input2").value=str;
	 	}, 
	 	"json" //返回数据的格式
	 	)
 	}
 	
 	//Ajax异步响应
 	function fn3(){
 	$.ajax(
 	{
 	url:"/WEB/ajaxServlet", 
 	async:true, // 异步
 	type:"POST", // 请求方式
	data:{"name":"lucy","age":18}, // 请求参数
	success:function(data){ // 请求成功执行函数
	document.getElementById("input3").value="Rose";
	},
	error:function(){
	alert("请求失败"); // 请求失败执行函数
	},
	dataType:"json"
 	}
 	)
 	}
 </script>
 </head>
 
 <body>
	<input type="button" value="Get异步响应" onclick="fn1()"><input type="text" id="input1">
	<br><br>
	<input type="button" value="Post异步响应" onclick="fn2()"><input type="text" id="input2">
	<br><br>
	<input type="button" value="Ajax异步响应" onclick="fn3()"><input type="text" id="input3">
 </body>
</html>

实例效果1：请求成功时