Ajax() を使用してバックグラウンドと対話する方法の詳細な説明

今回は、Ajax() とバックエンドの対話的使用について詳しく説明します。 Ajax() とバックエンドを対話的に使用する場合の 注意事項 について、実際のケースを見てみましょう。

Ajax は「Asynchronous

JavaScript and XML」(非同期 JavaScript と XML) の略で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。 Ajax テクノロジーは、現在ブラウザーで JavaScript スクリプトを通じて利用できるすべてのテクノロジーを集めたものです。Ajax は「Asynchronous JavaScript and XML」の略で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジーを指します。 Ajax テクノロジーは、現在 JavaScript スクリプトを通じてブラウザーで利用できるすべてのテクノロジーを集めたものです。 Ajax はこれらすべてのテクノロジーを新しい方法で使用し、Web 開発の古い B/S スタイルを復活させます。

ajax() メソッドは jQuery の基礎となる ajax 実装であり、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);
//请求失败时调用此函数
}
});
}

パラメータの説明:

タイプ:リクエストメソッド、「POST」または「GET」、デフォルトは「GET」です。

url: リクエストを送信するアドレス。

データ：サーバーに転送するデータは、key:value(id:1)の形式で記述されます。 GET リクエストは URL に追加されます。

async: デフォルトは true で、false に設定すると同期リクエストになります。

dataType: サーバーによって返されることが期待される

データタイプ

。未指定のままにすることができます。 XML、HTML、テキストなどがあります。

開発中、上記のパラメータを使用すると、基本的なニーズを満たすことができます。

中国語のパラメータをサーバーに渡す必要がある場合は、URLの後にパラメータを記述し、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);
//请求失败时调用此函数
}
});
}

Struts2アクションはリクエストを処理します:

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.xml

設定ファイル

: 戻り値の型を記述する必要はありません

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

AJAXのフロントエンドとバックエンドの対話メソッドを共有します

注: ajaxはasyncパラメータによって決定されます 非同期または、同期、偽同期、真の非同期。

非同期実行シーケンスは、最初に後続のアクションを実行し、次に成功時にコードを実行します。

同期は、最初に成功時にコードを実行し、その後に後続のアクションを実行します。コード;

検証: 同期中のデータ量はフリーズしますか?たとえば、大量のデータをバックグラウンドから検索するときに、ページがスタックすることはありますか?

1. (非同期) メソッド呼び出し、後続のコードは実行結果を待つ必要がありません

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. (同期) メソッド呼び出しを使用できます。必要に応じて戻り値を取得することは、後続のコードを実行するための前提条件です

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;

この記事の事例を読んだ後は、このメソッドを習得したと思います。さらに興味深い情報については、こちらをご覧ください。 、PHP 中国語 Web サイトの記事の他の関連トピックにも注目してください。

推奨読書:

Ajax でクロスドメイン アクセスを実現する 3 つの方法のまとめ

Ajax のクロスドメイン問題に対する完璧な解決策

以上がAjax() を使用してバックグラウンドと対話する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。