Maison > Article > interface Web > Discussion sur les problèmes asynchrones Ajax de Jquery

Discussion sur les problèmes asynchrones Ajax de Jquery

零到壹度original: 2018-03-29 09:55:241164parcourir

Cet article partage principalement avec vous une discussion sur les problèmes asynchrones de Jquery en Ajax. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l’éditeur et jetons un coup d’œil.

1. $.get(url, [data], [callback], [type]); ne peut être que Asynchrone

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

Liste des paramètres :

url : représente l'adresse côté serveur de la requête ;

data : Représente les données demandées au serveur (peut être au format clé=valeur ou au format json)

callback : Représente la fonction déclenchée par une réponse réussie du serveur (exécutée uniquement) ; si le succès normal revient) ;

type : indique le type de données renvoyé par le serveur (jquery tapera automatiquement la conversion en fonction du type spécifié),

Types de retour couramment utilisés : texte, json, html, etc.

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

Les options couramment utilisées sont les suivantes :

async : s'il faut être asynchrone, la valeur par défaut est true, ce qui signifie asynchrone ;

data : paramètres envoyés au ; serveur, il est recommandé d'utiliser le format json ;

dataType : le type de données renvoyé par le serveur, le texte couramment utilisé et json

success : répond avec succès à la fonction exécutée, le type correspondant ; est le type de fonction ;

type : Méthode de requête, POST/GET

URL : Demande d'adresse côté serveur.

Faisons un exemple de démonstration :

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>

Effet d'instance 1 : Lorsque la demande est réussie

Instance effet 2 : Modifiez l'url de fn3() en "/WEB/ajaxServlet33" afin que lorsque la requête échoue,

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter le changement d'onglet et le changement de sélection dans AngularJSArticle suivant：Comment implémenter le changement d'onglet et le changement de sélection dans AngularJS

Articles Liés

Voir plus