Rumah > Artikel > hujung hadapan web > 关于Jquery的Ajax异同步的问题探讨

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

零到壹度asal: 2018-03-29 09:55:241169semak imbas

本文主要为大家分享一篇关于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：请求成功时

实例效果2：修改fn3()的url为"/WEB/ajaxServlet33"，使其请求失败时

Atas ialah kandungan terperinci 关于Jquery的Ajax异同步的问题探讨. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：angularjs如何实现tab切换和选中切换Artikel seterusnya：php如何将汉字转换为拼音

Artikel berkaitan

Lihat lagi