首页 小组 问答 话题 好文 素材 用户 唠叨 我的社区

[分享]Ajax 之 [ jQuery中的Ajax ]

九秘Lv.1种子选手
2024-09-24 20:21:14
0
43

jQuery中的Ajax

在jQuery中使用Ajax

  • 在jQuery提供了一系列的方法来对Ajax进行操作

    • load()方法

    • $.get()方法

    • $.post()方法

    • ajax()方法

    • $.getScript()方法

    • $.getJSON()方法

load()方法

  • 参数

    • 第一个参数 - 表示异步交互的请求地址

    • 第二个参数 - 表示异步交互的请求数据

      • 省略请求数据时,当前的请求方式为 GET

      • 发送请求数据时,当前的请求方式为 POST

    • 第三个参数 - 表示异步交互请求成功后的回调函数

  • 该方法具有返回值

    • 服务器端的响应结果

注意

  • 会自动将返回结果写到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

  • 参数

    • 第一个参数 - 表示异步交互的请求地址

    • 第二个参数 - 表示异步交互的请求数据

    • 第三个参数 - 表示异步交互请求成功后的回调函数

      • 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 () {
        $.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>
九秘
九秘

18 天前

签名 : 我常驻在>https://www.huaqu.club/ask   43       0
评论
站长交流