Detaillierte Erläuterung der Schritte zur Interaktion mit Ajax() und des Hintergrunds

Dieses Mal werde ich Ihnen die Schritte der Interaktion zwischen Ajax() und dem Backend ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Interaktion zwischen Ajax() und dem Backend? Praktischer Fall, werfen wir einen Blick darauf.

Ajax steht für „Asynchronous JavaScript and XML“ (asynchrones JavaScript und XML), was sich auf eine Webentwicklungstechnologie zur Erstellung interaktiver Webanwendungen bezieht. Die Ajax-Technologie ist eine Sammlung aller Technologien, die derzeit in Browsern über JavaScript-Skripte verfügbar sind. Ajax nutzt all diese Technologien auf eine neue Art und Weise und belebt so den alten B/S-Stil der Webentwicklung.

Die ajax()-Methode ist die zugrunde liegende Ajax-Implementierung von jQuery, die Remote-Daten über HTTP-Anfragen lädt.

$.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);
//请求失败时调用此函数
}
});
}

Parameterbeschreibung:

Typ: Anforderungsmethode, „POST“ oder „GET“, der Standardwert ist „GET“.

URL: Die Adresse zum Senden der Anfrage.

Daten: Die an den Server zu übertragenden Daten werden in Form von Schlüssel: Wert (ID: 1) geschrieben. GET-Anfragen werden an die URL angehängt.

async: Der Standardwert ist true, was eine asynchrone Anfrage ist. Wenn er auf false gesetzt ist, handelt es sich um eine synchrone Anfrage.

DataType: Der Datentyp , der voraussichtlich vom Server zurückgegeben wird, kann nicht angegeben werden. Es gibt XML, HTML, Text usw.

Während der Entwicklung kann die Verwendung der oben genannten Parameter Grundbedürfnisse erfüllen.

Wenn Sie chinesische Parameter an den Server übergeben müssen, können Sie die Parameter nach der URL schreiben und sie mit encodeURI codieren.

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);
//请求失败时调用此函数
}
});
}

Die Aktion struts2 verarbeitet die Anfrage:

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.xmlKonfigurationsdatei : Rückgabetyp

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

AJAX-Front-End- und Back-End-Interaktionsmethoden teilen

Hinweis: Ajax bestimmt über den Parameter async, ob es asynchron oder synchron ist, false ist synchron. true ist asynchron;

Die asynchrone Ausführungssequenz besteht darin, zuerst die nachfolgenden Aktionen auszuführen und dann den Code im Erfolg auszuführen.

Die Synchronisierung besteht darin, den Code zuerst im Erfolg auszuführen Führen Sie den folgenden Code aus.

Überprüfung: Ob die große Datenmenge während der Synchronisierung Dayton hängen bleibt? Bleibt die Seite beispielsweise hängen, wenn im Hintergrund eine große Datenmenge durchsucht wird?

1. (Asynchroner) Methodenaufruf, nachfolgender Code muss nicht auf sein Ausführungsergebnis warten

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. (Synchroner) Methodenaufruf, der verwendet werden kann, um den Rückgabewert als Voraussetzung für die Ausführung von nachfolgendem Code zu erhalten

Backend:

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

Rezeption:

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;

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Wie man Ajax in Django verwendet

Detaillierte Erläuterung der Seiten-Non-Refresh-Implementierung von Ajax (mit Code)

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Interaktion mit Ajax() und des Hintergrunds. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!