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>