Diskussion zu den asynchronen Ajax-Problemen von Jquery-js-Tutorial-php.cn

Diskussion zu den asynchronen Ajax-Problemen von Jquery

零到壹度

Freigeben： 2018-03-29 09:55:24

Original

1211 Leute haben es durchsucht

Dieser Artikel teilt Ihnen hauptsächlich eine Diskussion über die asynchronen Probleme von Jquery. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

1. $.get(url, [data], [callback], [type]); >Asynchron2.

$.post(url, [data], [callback], [type]);

Asynchron

Parameterliste:

URL: Stellt die serverseitige Adresse der Anfrage dar; Daten: Stellt die vom Server angeforderten Daten dar (kann im Schlüssel=Wert-Format oder JSON-Format vorliegen);

Rückruf: Stellt die Funktion dar, die durch eine erfolgreiche Antwort vom Server ausgelöst wird (nur ausgeführt). wenn der normale Erfolg zurückkehrt);

Typ: Gibt den vom Server zurückgegebenen Datentyp an (jquery führt automatisch eine Typkonvertierung gemäß dem angegebenen Typ durch),

Häufig verwendete Rückgabetypen: Text, JSON, HTML usw. .

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

Häufig verwendete Optionen sind wie folgt: async: ob asynchron sein soll, der Standardwert ist true, was asynchron bedeutet;

data: Parameter, die an gesendet werden Server, es wird empfohlen, das JSON-Format zu verwenden.

dataType: Der vom Server zurückgegebene Datentyp, häufig verwendeter Text und JSON. Erfolg: Reagiert erfolgreich auf die ausgeführte Funktion, den entsprechenden Typ ist der Funktionstyp;

Typ: Anforderungsmethode,

URL: Serverseitige Adresse anfordern.

Machen wir eine Beispieldemonstration:

AjaxServle.java

TestAjax.html

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

}

Nach dem Login kopieren

Instanzeffekt 1: Wenn die Anfrage erfolgreich ist

<!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>

Nach dem Login kopieren

Instanz Effekt 2: Ändern Sie die URL von fn3() in „/WEB/ajaxServlet33“, sodass

Das obige ist der detaillierte Inhalt vonDiskussion zu den asynchronen Ajax-Problemen von Jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!