Ajax関連機能

Ajax 関連関数

jQuery は、Ajax 関数を支援するためにいくつかの関連関数を提供します。

1. jQuery.ajaxSetup( options )

戻り値なし

説明:

グローバル AJAX のデフォルトオプションオプションを設定します。

説明:

場合によっては、ページ上のすべての Ajax 属性のデフォルトの動作を設定したい場合があります。その場合、この関数を使用してオプションを設定すると、すべての Ajax リクエストのデフォルトのオプションが変更されます。

たとえば、ページが読み込まれるときに、次のコードを使用して Ajax のデフォルトオプションを設定します。

$.ajaxSetup({    url: "../data/AjaxGetMethod.aspx",    data: { "param": "ziqiu.zhang" },    global: false,    type: "POST",    success: function(data, textStatus) { $("#divResult").html(data); }});
此后我们可以使用无参数的get(),post()或者ajax()方法发送 ajax 请求.完整的示例代码如下:
<!doctype html><html><head>
 <meta charset="utf-8"/>
 <title>jQuery Ajax - Load</title>
 <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script>
   $(document).ready(function() {
     $.ajaxSetup({
         url: "../data/AjaxGetMethod.aspx",
         data: { "param": "ziqiu.zhang" },
         global: false,
         type: "POST",
         success: function(data, textStatus) {
           $("#divResult").html(data);
         }
     });
     $("#btnAjax").click(function(event) { $.ajax(); });
     $("#btnGet").click(function(event) { $.get(); });
     $("#btnPost").click(function(event) { $.post(); });
     $("#btnGet2").click(function(event) { $.get("../data/AjaxGetMethod.aspx",{ "param": "other" }); });
   });  </script></head>  <body>    
 <button id="btnAjax">nontransfer param call ajax() method</button><br />
 <button id="btnGet">nontransfer param call get() method</button><br />
 <button id="btnPost">nontransfer param call post() method</button><br />
 <button id="btnGet2">transfer param call get() method , use global default callback</button><br />
 <br />
 <div id="divResult"></div>
</body>
</html>

get() または post() メソッドを使用する場合、type パラメーターが GET として書き換えられる点に注意してください。または POST、その他パラメータが渡されない限り、デフォルトのグローバルオプションが使用されます。特定のオプションが渡される場合、たとえば最後のボタンが URL とパラメータを渡す場合、この呼び出しは渡されたオプションに基づいて行われます。コールバック関数など、渡されないオプションは、引き続きグローバルオプションを使用して値を設定します。

2.serialize( )

Returns: String

Description:

シーケンスリストテーブルの内容は、Ajax リクエストに使用される文字列です。

シリアル化は、フォームデータをサーバーに送信するときに最も一般的に使用されます。シリアル化されたデータは標準形式であり、ほぼすべてのサーバーでサポートできます。

できるだけ正常に動作するには、シリアル化されるフォームフィールドに name 属性が必要です。eid が 1 つだけでは機能しません。

次のように name 属性を記述します: <input id="email" name="email" type="text" />

説明:

serialize() 関数は、フォーム内のフォームオブジェクトを結合します。文字列としてサーバーに送信されます。 Ajaxを利用して送信する際にフォームデータを取得できると便利です。これは、フォームが Get メソッドで送信される場合と似ており、フォームオブジェクトの名前/値が送信用の URL に自動的に配置されます。

3.serializeArray( )

戻り値: Array< Object>

説明:

この関数を使用して JSON オブジェクトを取得しますが、jQuery は JSON オブジェクトを JSON 文字列に変換するメソッドを提供しません。したがって、元の記事で説明した jquery.json プラグインなどのプラグインを使用する必要があります

学び続ける

新しいファイル

<html> <head> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").text($("form").serialize()); }); }); </script> </head> <body> <form action=""> 姓名: <input type="text" name="FirstName" value="Bill" /><br /> 职位: <input type="text" name="LastName" value="Gates" /><br /> </form> <button>序列化表单值</button> <div></div> </body> </html>

提出するリセットコード

自動運転