Ajax 之 [ jQuery中的Ajax ]

時間 2019-12-05

標籤 ajax jquery 欄目 Ajax 简体版

原文原文鏈接

jQuery中的Ajax

在jQuery中使用Ajax

在jQuery提供了一系列的方法來對Ajax進行操做html
- load()方法
- $.get()方法
- $.post()方法
- ajax()方法
- $.getScript()方法
- $.getJSON()方法

load()方法

參數jquery
- 第一個參數 - 表示異步交互的請求地址
- 第二個參數 - 表示異步交互的請求數據ajax
  - 省略請求數據時，當前的請求方式爲 GET
  - 發送請求數據時，當前的請求方式爲 POST
- 第三個參數 - 表示異步交互請求成功後的回調函數
該方法具備返回值json
- 服務器端的響應結果

注意

會自動將返回結果寫到HTML頁面的指定目標元素中

示例代碼

<body>
<button id="btn">按鈕</button>
<script src="chajian/jquery.js"></script>
<script>
    var $btn = $( '#btn' );
    $btn.click( function () {
        $btn.load( 'JSON.json', {name:'融念冰'}, function () {
            console.log( '三步白頭' );
        } );
    } );
</script>
</body>

$.get()方法

該方法的請求方式爲 GET
參數服務器
- 第一個參數 - 表示異步交互的請求地址
- 第二個參數 - 表示異步交互的請求數據
- 第三個參數 - 表示異步交互請求成功後的回調函數異步
  - response參數 - 表示獲取當前的JSON文件內容
- 第四個參數 - 表示設置服務器端響應結果的格式函數
  - xml、html、script、json、text等

示例代碼

<body>
<button id="btn">按鈕</button>
<script src="chajian/jquery.js"></script>
<script>
    var $btn = $( '#btn' );
    $btn.click( function () {
        $.get( 'JSON.json', {name:'融念冰'}, function ( response ) {
            console.log( response );
        }, 'json' );
</script>
</body>

$.post()方法

該方法的請求方式爲 POST
參數post
- 第一個參數 - 表示異步交互的請求地址
- 第二個參數 - 表示異步交互的請求數據
- 第三個參數 - 表示異步交互請求成功後的回調函數code
  - response參數 - 表示獲取當前的JSON文件內容
- 第四個參數 - 表示設置服務器端響應結果的格式orm
  - xml、html、script、json、text等

示例代碼

<body>
<button id="btn">按鈕</button>
<script src="chajian/jquery.js"></script>
<script>
    var $btn = $( '#btn' );
    $btn.click( function () {
        $.post( 'JSON.json', {name:'融念冰'}, function ( response ) {
            console.log( response );
        }, 'json' );
    } );
</script>
</body>

ajax()方法

參數
- 第一個參數 - 表示異步交互請求的地址
- 第二個參數 - 表示設置異步交互請求的
  - 該參數的可選項
  - type - 設置當前的請求方式
  - data - 發送給服務器端的請求數據
  - dataType - 服務器端響應結果的格式
  - success - 異步交互請求成功後的回調函數
    - 回調函數的參數
      - data - 表示服務器端響應的結果
      - textStatus - 表示服務器端當前的狀態
      - jqXHR - Ajax中的核心對象

示例代碼

<body>
<button id="btn">按鈕</button>
<script src="chajian/jquery.js"></script>
<script>
    var $btn = $( '#btn' );
    $btn.click( function () {
        $.ajax( 'JSON.json', {
            type : 'get',
            dataType : 'text',
            success : function( data ) {
                console.log( data );
            }
        } );
    } );
</script>
</body>

$.getScript()方法

該方法的請求方式爲 GET
參數
- 第一個參數 - 表示請求JavaScript文件的地址
- 第二個參數 - 指定JavaScript文件加載成功的回調函數
  - 該回調函數的參數
  - data - 表示獲取指定文件的內容

示例代碼

<body>
<button id="btn">按鈕</button>
<script src="chajian/jquery.js"></script>
<script>
    var $btn = $( '#btn' );
    $btn.click( function () {
        $.getScript( 'JS.js', function( data ) {
            console.log( data );
            eval( data );
        } );
    } );
</script>
</body>

$.getJSON()方法

該方法的請求方式爲 GET
參數
- 第一個參數 - 表示請求JavaScript文件的地址
- 第二個參數 - 表示發送給服務器端的數據內容
- 第三個參數 - 指定JavaScript文件加載成功的回調函數
  - 該回調函數的參數
  - data - 表示獲取指定文件的內容

示例代碼

<body>
<button id="btn">按鈕</button>
<script src="chajian/jquery.js"></script>
<script>
    var $btn = $( '#btn' );
    $btn.click( function () {
        $.getJSON( 'JS.js',{name:'唐三'}, function( data ) {
            console.log( data );
        } );
    } );
</script>
</body>

異步提交表單

<body>
<form action="#">
    <input type="text" id="name">
    <input type="submit">
</form>
<script src="chajian/jquery.js"></script>
<script>
    var $form = $( 'form' );
    $form.bind( 'submit', function( event ) {
        // 經過事件屬性來阻止表單提交的默認行爲
        event.preventDefault();
        // 經過val()方法來獲取表單組件的數據內容
        var name = $( '#name' ).val();
        // 構建發送給服務器端的數據格式
        var data = 'name=' + name;
        // 經過異步交互提交表單
        $.post( 'JSON.json', data, function( response ) {
            console.log( response );
        } );
    } );
</script>
</body>

表單序列化

根據表單默認同步提交獲取數據的方式

serialize()方法

將數據內容序列化爲指定格式的字符串內容

serializeArray()方法

將數據內容序列化爲JSON格式的數據內容

示例代碼

<body>
<form action="#">
    <input type="text" name="username" id="name">
    <input type="text" name="password" id="pwd">
    <input type="submit">
</form>
<script src="chajian/jquery.js"></script>
<script>
    var $form = $( 'form' );
    $form.bind( 'submit', function( event ) {
        // 阻止默認行爲
        event.preventDefault();
        /*
            根據表單默認同步提交獲取數據的方式
             * serialize()方法
              * 將數據內容序列化爲指定格式的字符串內容
             * serializeArray()方法
              * 將數據內容序列化爲JSON格式的數據內容
         */

        // var data = $form.serialize();

        var data = $form.serializeArray();
        console.log(data);
        // 3.經過異步交互提交表單
        $.post( 'JSON.json', data, function( response ) {
            console.log( response );
        } );
    } );

</script>
</body>