Detaillierte Erläuterung der Verwendung von Ajax() zur Interaktion mit dem Hintergrund

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der interaktiven Verwendung von Ajax() und des Backends geben. Was sind die Vorsichtsmaßnahmen für die interaktive Verwendung von Ajax() und dem Backend? Praktischer Fall, werfen wir einen Blick darauf.

Ajax steht für „Asynchronous JavaScript and XML“ (asynchrones JavaScript und XML) und bezeichnet eine Webentwicklungstechnologie zur Erstellung interaktiver Webanwendungen. Die Ajax-Technologie ist eine Sammlung aller derzeit über JavaScript-Skripte in Browsern verfügbaren Technologien.

Ajax steht für „Asynchronous JavaScript and XML“ (asynchrones JavaScript und XML) und bezieht sich auf eine Methode zum Erstellen interaktiver Webanwendungen. Webentwicklungstechnologie . 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 übergebenden 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 : Der Rückgabetyp

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

Teilen Sie AJAX-Front-End- und Back-End-Interaktionsmethoden

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

Die asynchrone Ausführungsreihenfolge besteht darin, zuerst den Code im Erfolgsmodus auszuführen.

Die Synchronisierung besteht darin, den Code im Erfolgsmodus zuerst auszuführen und dann den nachfolgenden Code auszuführen.

Überprüfung: Wird die große Datenmenge während der Synchronisierung einfrieren? 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;
}

Vordergrund:

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

Frontend

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:

Eine Zusammenfassung von drei Methoden, um mit Ajax domänenübergreifenden Zugriff zu erreichen

Perfekte Lösung für Ajax domänenübergreifendes Problem

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