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

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

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

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

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;