ホームページ ウェブフロントエンド jsチュートリアル jQueryの詳しい解説 Json data_jqueryのAjax非同期処理

jQueryの詳しい解説 Json data_jqueryのAjax非同期処理

May 16, 2016 pm 05:17 PM
ajax jquery json

まず公式の例を見てみましょう
AJAX リクエストを使用して JSON データを取得し、結果を出力します:

Copy code Code As

$("button").click(function(){
$.getJSON("demo_ajax_json.js",function(result){
$.each(result) 、関数(i, フィールド){
🎜>この関数は、



コードをコピー


コードは次のとおりです。
$.ajax({ url: url, data: data, success: callback, dataType: json
});


サーバーへのデータの送信は、クエリ文字列として URL に追加できます。 data パラメーターの値がオブジェクト (マップ) の場合、URL に追加される前に文字列に変換され、URL エンコードされます。
コールバックに渡される戻りデータは、JavaScript オブジェクトまたは JSON 構造で定義された配列であり、$.parseJSON() メソッドを使用して解析されます。
test.js から JSON データをロードし、JSON データ内の名前フィールド データを表示します:



コードをコピーします


コードは次のとおりです: asp.net インスタンス
まず、転送する json データを指定します: [{"demoData":"This Is The JSON Data"}]
1,通常の aspx ページを使用します
この方法が最も扱いやすいと思います。以下のコードを見てください



コードをコピー


コードは次のとおりです:
$.ajax({ url: "Default.aspx", dataType: "json", success: function (data) { }、
エラー:function(xmlhttprequest、textStatus、errorthrown){
});


バックグラウンドでデータを送信するためのコードは次のとおりです
コードをコピーします コードは次のとおりです:

Response.Write("[{"demoData":"これは JSON データです"}]"); .End();


この処理メソッドは、渡されたデータを json データに直接解析します。つまり、ここでのフロントエンド js コードは、データを文字列データではなく json オブジェクト データに直接解析する可能性があります。 data [0].demoData など、この json オブジェクト データはここで直接使用されます
2、Web サービス (asmx) は
の処理に使用されます。この処理メソッドは渡されたデータを json オブジェクト データとして扱いませんが、処理されます。文字列として、次のコードを入力します



コードをコピーします コードは次のとおりです:$ .ajax ({
type: "post",
url: "JqueryCSMethodForm.asmx/GetDemoData",
dataType: "json",/*この文は使用してもしなくても、影響はありません* /
contentType: "application/json; charset=utf-8",
success: function (data) {
$("input#showTime").val(eval('(' data.d ')')[0 ].demoData);
//データを変換するには 2 つの方法があります。2 つの処理方法は同じ効果があります。//$("input#showTime").val(eval(data.d) )[0].demoData );
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown); asmx メソッド コード





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

[WebMethod] public static string GetDemoData() { return " [{"demoData":"This Is The JSON Data"}]"; } この処理メソッドは単に渡すだけです。返された JSON データは文字列として処理されます。このデータは、
まず HTML テンプレートを見てみましょう:


コードをコピーします


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

 
               
                   
                   
                   
                   
                   
                   
                   
                   
                   
               
               
                   
                   
                   
                   
                   
                   
シティ">

                        订单ID

                        客户ID

                        雇员ID

                        订购日期

                        发货日期

                        货主名称

                        货主地址

                        货主城市

                        更多信息

                   

                   

                   

                   

                   


注意しなければならないのは、id 属性内のすべてがキーであるということです。 AJAX リクエストとデータ バインディング コードを見てみましょう




コードをコピーします

コードは次のとおりです:
$ .ajax({ type: "get",//get メソッドを使用してバックグラウンドにアクセスします データにアクセスしました: "pageIndex=" pageIndex,//データsend complete:function(){$("#load").hide();},//AJAX リクエストが完了したとき 読み込み中のプロンプトを非表示にする success: function(msg){//msg は返されたデータ。ここでデータ バインディングを行います
var data = msg.table;
$.each(data, function(i, n){
var row = $("#template").clone() ;
row.find("#OrderID").text(n.OrderID);
row.find(" #CustomerID").text(n.Customer ID);
(n. 注文日));
if (n. 配達日! == 未定義) row.find ("#shippeddate"). find("#ShippedName").text(n. 配送業者名);
row.find( "#ShippedAddress").text(n.荷主住所);
row.find("#ShippedCity"). text(n.荷主都市);
row.find("#more").html( "< a href = orderfo.aspx?id =" n.order id "&pageindex =" pageindex "; more< /a>"); >
これはjQueryのAJAXメソッドであり、返されたデータをテンプレートの定義に従ってページに表示する方法を主に説明します。 1 つ目は、「var row = $("#template").clone();」で、最初にテンプレートをコピーし、次に row.find("#OrderID").text(n. order ID); であることを示しています。 id=OrderID のタグには、対応するデータを innerText に設定します。 もちろん、html 形式のデータを設定することもできます。または、外部関数を通じてデータを必要な形式に変換します。たとえば、 row.find("#OrderDate").text(ChangeDate(n.Order Date)); これは、テンプレート バインディング データを実行するサーバー コントロールに少し似ています。
これらはすべて静的ページに配置され、データは AJAX メソッドを通じてバックグラウンドからのみ取得されます。
コードをコピーします。 コードは次のとおりです:




    test1
   
   


   

         

           

            value=" < " /> value=" >>  " />
             
           
               
                   
                   
                   
                   
                   
                   
                   
                   
                   
               
               
                   










読み込み中.. ..




< /html>

PageData.js には、上の AJAX 要求とデータ コードの決定が含まれる js が含まれており、全体的なフォームは使用されず、非常に優れた機能が備わっています。
复制代码代码如下:




  • fsdfasdf
    < ;/span>





    ;span id="注文日">









  • lt;/ul>

も注意すべき id プロパティです。この説明は、どのような形式であっても、id プロパティが同じであれば、データを対応する位置に特定できることを示しています。 ,我们这これら做程序的就不不会因為美工的修改而修改码了,而して美工也只要做出html就可了,不需要是服务器控件做模板(不过我还没遇到过这样的美工,都是美工設計は、サーバー コントローラーのモールドを変更することに同意しました)。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PHP 配列を JSON に変換するためのパフォーマンス最適化のヒント PHP 配列を JSON に変換するためのパフォーマンス最適化のヒント May 04, 2024 pm 06:15 PM

PHP 配列を JSON に変換するためのパフォーマンスの最適化方法には、JSON 拡張機能と json_encode() 関数の使用、文字エスケープを回避するためのバッファーの使用、およびサードパーティのエンコード結果の使用の検討が含まれます。 JSONエンコーディングライブラリ。

PHP と Ajax: オートコンプリート提案エンジンの構築 PHP と Ajax: オートコンプリート提案エンジンの構築 Jun 02, 2024 pm 08:39 PM

PHP と Ajax を使用してオートコンプリート候補エンジンを構築します。 サーバー側スクリプト: Ajax リクエストを処理し、候補を返します (autocomplete.php)。クライアント スクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実際のケース: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化をどのように制御しますか? Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化をどのように制御しますか? May 06, 2024 pm 10:09 PM

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化を制御します。 シリアル化: @JsonIgnore: プロパティを無視します @JsonProperty: 名前を指定します @JsonGetter: get メソッドを使用します @JsonSetter: set メソッドを使用します Deserialization: @JsonIgnoreProperties: プロパティ @ JsonProperty を無視します:名前を指定 @JsonCreator: コンストラクターを使用 @JsonDeserialize: カスタム ロジック

PHPを深く理解する:JSON Unicodeを中国語に変換する実装方法 PHPを深く理解する:JSON Unicodeを中国語に変換する実装方法 Mar 05, 2024 pm 02:48 PM

PHP の深い理解: JSONUnicode を中国語に変換する実装方法 開発中、JSON データを処理する必要がある状況によく遭遇しますが、特に変換する必要がある場合、JSON 内の Unicode エンコードによっていくつかのシナリオで問題が発生します。 Unicode エンコードを漢字に変換する場合。 PHP では、この変換処理を実現するためのメソッドがいくつかありますが、以下では一般的なメソッドを紹介し、具体的なコード例を示します。まず、JSON の Un について理解しましょう

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Mar 09, 2024 pm 05:36 PM

Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプル コードです。

PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション Jun 06, 2024 pm 01:12 PM

Ajax (非同期 JavaScript および XML) を使用すると、ページをリロードせずに動的コンテンツを追加できます。 PHP と Ajax を使用すると、製品リストを動的にロードできます。HTML はコンテナ要素を含むページを作成し、Ajax リクエストはロード後に要素にデータを追加します。 JavaScript は Ajax を使用して XMLHttpRequest を通じてサーバーにリクエストを送信し、サーバーから JSON 形式で商品データを取得します。 PHP は MySQL を使用してデータベースから製品データをクエリし、それを JSON 形式にエンコードします。 JavaScript は JSON データを解析し、ページ コンテナーに表示します。ボタンをクリックすると、製品リストをロードするための Ajax リクエストがトリガーされます。

PHP 配列を JSON に変換するための簡単なヒント PHP 配列を JSON に変換するための簡単なヒント May 03, 2024 pm 06:33 PM

PHP 配列は、 json_encode() 関数を使用して JSON 文字列に変換できます (例: $json=json_encode($array);)。逆に、 json_decode() 関数を使用して JSON から配列に変換できます ($array= json_decode($json);) 。その他のヒントには、深い変換の回避、カスタム オプションの指定、サードパーティ ライブラリの使用などがあります。

PHP チュートリアル: JSON Unicode を漢字に変換する方法 PHP チュートリアル: JSON Unicode を漢字に変換する方法 Mar 05, 2024 pm 06:36 PM

JSON (JavaScriptObjectNotation) は、Web アプリケーション間のデータ交換に一般的に使用される軽量のデータ交換形式です。 JSON データを処理するとき、Unicode でエンコードされた中国語の文字 (「u4e2du6587」など) が頻繁に発生するため、それらを読み取り可能な中国語の文字に変換する必要があります。 PHP では、いくつかの簡単なメソッドを通じてこの変換を実現できます。次に、JSONUnico を変換する方法を詳しく説明します。

See all articles

                        订单ID

                        客户ID

                        雇员ID

                        订购日期

                        发货日期

                        货主名称

                        货主地址

                        货主城市

                        更多信息