Explication détaillée de l'utilisation d'Ajax() pour interagir avec l'arrière-plan

Cette fois, je vais vous apporter une explication détaillée de l'utilisation interactive d'Ajax() et du backend. Quelles sont les précautions pour l'utilisation interactive d'Ajax() et du backend. cas pratique, jetons un coup d'oeil.

Ajax signifie « Asynchronous JavaScript et XML » (JavaScript et XML asynchrones), qui fait référence à une technologie de développement Web permettant de créer des applications Web interactives. La technologie Ajax est un ensemble de toutes les technologies actuellement disponibles via les scripts JavaScript dans les navigateurs

Ajax signifie "Asynchronous JavaScript and XML" (JavaScript et XML asynchrones), qui fait référence à une méthode de création d'applications Web interactives. Technologie de développement Web . La technologie Ajax est un ensemble de toutes les technologies actuellement disponibles dans les navigateurs via des scripts JavaScript. Ajax utilise toutes ces technologies d'une nouvelle manière, revitalisant l'ancien style B/S de développement Web.

La méthode ajax() est l'implémentation ajax sous-jacente de jQuery, qui charge des données distantes via des requêtes HTTP.

$.ajax({
type: "GET",
url: "handleAjaxRequest.action",
data: {paramKey:paramValue},
async: true,
dataType:"json",
success: function(returnedData) {
alert(returnedData);
//请求成功后的回调函数
//returnedData--由服务器返回，并根据 dataType 参数进行处理后的数据；
//根据返回的数据进行业务处理
},
error: function(e) {
alert(e);
//请求失败时调用此函数
}
});
}

Description du paramètre :

type : méthode de requête, "POST" ou "GET", la valeur par défaut est "GET".

URL : L'adresse à laquelle envoyer la demande.

Données : Les données à transmettre au serveur sont écrites sous forme de clé : valeur (id : 1). Les requêtes GET seront ajoutées à l’URL.

async : La valeur par défaut est true, ce qui est une requête asynchrone. Si elle est définie sur false, il s'agit d'une requête synchrone.

DataType : Le type de données qui devrait être renvoyé par le serveur ne peut pas être spécifié. Il existe du XML, du HTML, du texte, etc.

Pendant le développement, l'utilisation des paramètres ci-dessus peut répondre aux besoins de base.

Si vous devez transmettre des paramètres chinois au serveur, vous pouvez écrire les paramètres après l'url et les encoder avec encodeURI.

var chinese = "中文";
var urlTemp = "handleAjaxRequest.action?chinese="+chinese;
var url = encodeURI(urlTemp);//进行编码
$.ajax({
type: "GET",
url: url,//直接写编码后的url
success: function(returnedData) {
alert(returnedData);
//请求成功后的回调函数
//returnedData--由服务器返回，并根据 dataType 参数进行处理后的数据；
//根据返回的数据进行业务处理
},
error: function(e) {
alert(e);
//请求失败时调用此函数
}
});
}

L'action struts2 gère la requête :

public void handleAjaxRequest() {
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
//设置返回数据为html文本格式
response.setContentType("text/html;charset=utf-");
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
PrintWriter out =null;
try {
String chinese = request.getParameter("chinese");
//参数值是中文，需要进行转换
chinese = new String(chinese.getBytes("ISO--"),"utf-");
System.out.println("chinese is : "+chinese);
//业务处理
String resultData = "hello world";
out = response.getWriter();
out.write(resultData);
//如果返回json数据，response.setContentType("application/json;charset=utf-");
//Gson gson = new Gson();
//String result = gson.toJson(resultData);//用Gson将数据转换为json格式
//out.write(result);
out.flush();
}catch(Exception e) {
e.printStackTrace();
}finally {
if(out != null) {
out.close();
}
}
}

struts.xmlFichier de configuration : Il n'est pas nécessaire d'écrire le type de retour

<action name="handleAjaxRequest" class="com.test.TestAction"
method="handleAjaxRequest">
</action>

Partager les méthodes d'interaction front-end et back-end AJAX

Remarque : ajax détermine s'il est asynchrone ou synchrone via le paramètre async, false est synchrone, true est asynchrone;

La séquence d'exécution asynchrone consiste à exécuter d'abord les actions suivantes, puis à exécuter le code avec succès

La synchronisation consiste à exécuter le code avec succès en premier ; , puis exécutez le code suivant ;

Vérification : la grande quantité de données sera-t-elle bloquée lors de la synchronisation Dayton ? Par exemple, lors de la recherche d’une grande quantité de données en arrière-plan, la page reste-t-elle bloquée ?

1. Appel de méthode (asynchrone), le code suivant n'a pas besoin d'attendre son résultat d'exécution

Backend :

using System.Web.Script.Services; 
public static string GetStr(string str1, string str2) 
{ 
return str1 + str2; 
}

Frontend :

function Test(strMsg1,strMsg2) 
{
$.ajax({
type: "Post",
url: "Demo.aspx/GetStr",
async: true,
//方法传参的写法一定要对，与后台一致，区分大小写，不能为数组等，str1为形参的名字,str2为第二个形参的名字 
data: "{'str1':'"+strMsg1+"','str2':'"+strMsg2+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容 
alert(data.d);
},
error: function(err) {
alert(err);
}
});
　　//隐藏加载动画
$("#pageloading").hide();
}

2. Appel de méthode (synchrone), qui peut être utilisé pour obtenir la valeur de retour comme condition préalable à l'exécution du code suivant

Backend:

using System.Web.Script.Services; 
public static string GetStr(string str1, string str2) 
{ 
return str1 + str2; 
}

Réception :

function Test(strMsg1,strMsg2) 
{
　var str = “”;
$.ajax({
type: "Post",
url: "Demo.aspx/GetStr",
async: false,
//方法传参的写法一定要对，与后台一致，区分大小写，不能为数组等，str1为形参的名字,str2为第二个形参的名字 
data: "{'str1':'"+strMsg1+"','str2':'"+strMsg2+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容 
str = data.d;
},
error: function(err) {
alert(err);
}
});
　return str;

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP. !

Lecture recommandée :

Un résumé de trois méthodes pour obtenir un accès inter-domaines avec Ajax

Solution parfaite pour ajax problème inter-domaines

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!