jQuery の ajax 使用シナリオについて議論する (c#)_jquery

1: jQuery.ajax 構文の基本

jQuery.ajax([オプション])

概要: HTTP リクエスト経由でリモート データを読み込みます。

jQuery の低レベル AJAX 実装。シンプルで使いやすい高レベルの実装については、$.get、$.post などを参照してください。 $.ajax() は、作成した XMLHttpRequest オブジェクトを返します。この方法を使用すると、さらに柔軟性が得られます。

データ型
$.ajax() 関数は、サーバーから提供された情報に依存して、返されたデータを処理します。 dataType オプションを使用して、さまざまなデータ処理方法を指定することもできます。このうち、テキスト型および XML 型で返されるデータは処理されません。 html タイプとして指定した場合、HTML が文字列として返される前に、埋め込まれた JavaScript が実行されます。 json型で指定した場合、取得したデータをJavaScriptオブジェクトとして解析し、構築したオブジェクトを結果として返します。サーバーにデータを送信するために、Ajax リクエストはデフォルトで GET メソッドを使用します。 POST メソッドを使用する場合は、type パラメーターの値を設定できます。このオプションは、データ オプションのコンテンツがサーバーに送信される方法にも影響します。

使用シナリオ 1:
説明: データをサーバーに保存し、成功すると情報を表示します。 jQuery コード:
$.ajax({
タイプ: "POST",
URL: "some.php",
データ: "name=John&location=Boston",
成功: function (msg){
alert( "保存されたデータ: " msg );
}
});

使用シナリオ 2:
説明: 最新バージョンの HTML Web ページを読み込みます。 jQuery コード:
$.ajax({
url: "test.html",
キャッシュ: false,
成功: function(html){
$("#results")。 append(html);
}
});

load(url, [data], [callback])
概要: リモート HTML ファイル コードをロードし、DOM に挿入します。
デフォルトでは GET メソッドが使用されます。追加のパラメータを渡すと、自動的に POST メソッドに変換されます。

使用シナリオ 1:
説明: feeds.html ファイルのコンテンツをロードします。 jQuery コード:
$("#feeds").load("feeds.html");

jQuery.get(url, [データ], [コールバック], [タイプ]) および jQuery.post(url, [データ], [コールバック], [タイプ])

概要: リモート HTTP GET または POST リクエストを介して情報を読み込みます。
これは、複雑な $.ajax を置き換える単純な GET または POST リクエスト関数です。コールバック関数は、リクエストが成功したときに呼び出すことができます。エラー時に関数を実行する必要がある場合は、$.ajax を使用します。
説明: test.aspx の戻り値 (戻り値に応じて HTML または XML) を表示し、一連の要求パラメーターを追加します。 jQuery コード:
$.get("test.aspx", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " data) ;
});
$.post("test.aspx", { 名前: "ジョン"、時刻: "午後 2 時" },
function(data){
alert("データが読み込まれました: " データ);
});

上記は基本的な構文です。すでに理解している場合は、次に、上記のメソッドと使用シナリオについて段階的に詳しく説明します。

2: ASP.NET での jQuery.ajax の実践

まず、要求開始ページとして Default.aspx ページを作成し、戻り値を取得します。ページ Default.aspx のコードは次のとおりです:

コードをコピーします コードは次のとおりです:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryAjax2._Default" %>








< ;/input>
;

ajax:

id="load">load: "get">get:
;/ul>

Default.aspx.cs にコードが記述されていない場合は、デフォルトで十分です。

リクエストの受信者には、response.aspx ページ、test.htm 静的ページ、および TextJson.txt の 3 つの役割があります。

response.aspx ページ: 主にクライアントによって送信されたデータをサーバー側で取得し、データをクライアントに返します。 test.htm 静的ページ: 主に、クライアントに最新バージョンの HTML Web ページを部分的にロードするために使用されます。

TextJson.txt: データとしてファイルに保存され、クライアントが非同期でアクセスできるようになります。

response.aspx ページ コード、response.aspx は:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="response.aspx.cs" Inherits="JqueryAjax2.response" %>

クライアントから送信されたデータをサーバー側で取得し、クライアントにデータを返すことが主な目的であるため、HTML コードはありません。HTML コンテンツを表示する必要がないため、HTML タグは含まれません。 。

response.aspx.cs ページ コード:

コードをコピー コードは次のとおりです:

System を使用;

System.Collections.Generic を使用;
System.Linq を使用;
System.Web を使用;
System.Web.UI を使用;
System.Web.UI を使用.WebControls;
System.Runtime.Serialization.Json を使用;
System.Runtime.Serialization を使用;

namespace JqueryAjax2

{

public 部分クラス応答: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string str = Request["key1"];
Response.Write("success" str); クライアントから送信されたデータを取得し、クライアントにデータを返す方法。

test.htm 静的ページのコードは次のとおりです:

コードをコピーします

コードは次のとおりです:

< ;/head>test.html

静的ページがリクエストされると、 HTML 形式でクライアントに返されるので、$("#resulthtml").append(html); を使用して test.htm 静的ページのコンテンツを表示します。

TextJson.txt には、json 形式のテキストが含まれています:

{ "key1": "Liu Mingfeng"、"key2": "Lin Wang"、"key3": "Chen Wenjie"、"key4": "Geng Dianjia" }

アクセスされた後、返されるデータは json 形式であり、クライアントが json を取得した後、自動的にオブジェクトに変換されます。

わかりました。jQuery の非同期使用シナリオは基本的に私たちのニーズを満たしています。実際に試してみましょう。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。