AJAX请求

Love The Way You Lie 2022-06-09 09:50 197阅读 0赞

## 1、封装jQuery的ajax方法 ##

var btn = document.querySelector( 'button' );
    btn.onclick = function () { 
        $.ajax( {
            type: 'post',
            url: '...',
            data: { name: 'itcast', age: 10 },// 要在ajax工具函数中把对象转换成key=value&key=value的形式
            success: function ( data ) { 
                console.log( data );
            }
        })
    }
    var $ = {
        // 处理对象的方法
        param: function ( obj ) { 
            var httpStr = '';
            for ( var k in obj ) {
                httpStr += k + '=' + obj[ k ] + '&';
            }
            httpStr = httpStr.slice( 0, -1 );
            return httpStr;
        },
        ajax: function ( options ) { 
            // 1.请求方式
            var type = options.type || 'get';
            // 2.请求地址
            var url = options.url || '';
            // 3.请求正文--格式化数据
            var data = this.param( options.data || {});
            // 4.成功时的回调函数
            var success = options.success;
            // 1.实例化对象
            var xhr = new XMLHttpRequest();
            // 2.设置请求行
            if ( type == "get" ) {
                url = url + '?' + data;
                data = null;
            }
            xhr.open( type, url );
            // 3.设置请求头
            if ( type == "post" ) {
                xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
            }
            // 4.监听并处理相应
            xhr.onreadystatechange = function () { 
                if ( xhr.readyState == 4 && xhr.status == 200 ) {
                    // 6.成功时的回调
                    success( xhr.responseText );
                }
            }
            // 5.设置请求正文
            xhr.send( data );
        }
    }

## 2、jQuery方法 ##

$( 'input' ).on( 'click', function () { 
        $.ajax( {
            type: 'post',
            url: 'url',
            data: null,
            dataType: 'html',
            beforeSend: function () { 
                console.log( '请求发起前' );
            },
            success: function ( result ) { 
                var arr = JSON.parse( result );
                var html = '';
                for ( var i = 0; i < arr.length; i++ ) {
                    html +=
                        '<tr>' +
                        '<td>' + arr[ i ].name + '</td>' +
                        '<td>' + arr[ i ].photo + '</td>'
                        '</tr>';
                }
                $( 'table' ).html( html );
            },
            error: function ( error ) { 
                // console.log( error );
            },
            complete: function () { 
                console.log( '请求完成(无论请求成功还是失败都会触发)' )
            }
        })
    })

jQuery的get方法：

$( 'button' ).click( function () { 
        $.get( 'stars.php', null, function ( data ) { 
            console.log( data );
        })
    })

jQuery的post方法：

$( 'button' ).click( function () { 
       $.post( 'stars.php', null, function ( data ) { 
           console.log( data );
           var html = "";
           for ( var i = 0; i < data.length; i++ ) {
               html +=
                   '<tr>' +
                   '<td>' + data[ i ].name + '</td>' +
                   '<td>' + data[ i ].age + '</td>'
                   '</tr>'
           }
           $( 'table' ).html( html );
       })
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 Ajax请求内嵌套Ajax请求的方法

前段时间做项目，需要把全国省市的两个XML文件整合成一个JSON格式的数据，手写的话觉得数据太多了，而且容易出错，于是就想到了用Ajax嵌套的方法来解决，就想平时用Ajax的方

男娘i/ 2023年06月05日 14:00/ 0 赞/ 291 阅读

相关怎么减少ajax的请求,减少Ajax请求

我正在使用jQuery和JSON制作聊天脚本，但由于'资源使用限制'，我的主机暂停了它。我想知道是否有可能(以及如何)减少这些请求。我读了一个关于Ajax超时的问题，但我对Aj

不念不忘少年蓝@/ 2022年09月03日 14:13/ 0 赞/ 165 阅读

相关 AJAX请求

1、封装jQuery的ajax方法 var btn = document.querySelector( 'button' ); btn.onclick =

Love The Way You Lie/ 2022年06月09日 09:50/ 0 赞/ 198 阅读

相关 ajax请求https

ajax请求路径是https的时候，如果服务器没有配置ssl证书，访问此页面时，浏览器控制台会显示SSL ERROR，和一些其他错误，但请求路径是http是，则不会报错 aj

心已赠人/ 2022年06月05日 11:26/ 0 赞/ 545 阅读

相关 Ajax请求方式

get请求方式 :请求实体直接拼接在URL后面 ajax.open("get","ajax?name=张三&age=12"); ajax

电玩女神/ 2022年04月12日 09:49/ 0 赞/ 215 阅读

相关 ajax请求格式

var rowsData = $('receiptPrintList').datagrid('getSelections'); $.ajax({

快来打我*/ 2022年03月12日 11:36/ 0 赞/ 178 阅读

相关原生ajax请求与jquery-ajax请求

ajax请求可以在不刷新页面的情况下，请求后台服务器为了演示的效果，在jsp中添加一段视频，再播放视频的时候请求后台，看效果。普通表单提交返回数据，会刷新页面使

约定不等于承诺〃/ 2022年02月04日 08:29/ 0 赞/ 345 阅读

相关 ajax/post请求

1 <script> 2 window.addEventListener('load', function (ev) { 3

╰+攻爆jí腚メ/ 2021年11月11日 00:26/ 0 赞/ 339 阅读

相关 ajax接口请求

<script type="text/javascript"> aaa() funct

超、凢脫俗/ 2021年09月30日 23:46/ 0 赞/ 386 阅读

相关 jqAjax Ajax请求

后台php文件一定不能有<-- -->这样的注释和除了echo json\_encode()外其他的 echo ，否则无法传输！！！前台: Ajax

蔚落/ 2021年07月24日 21:52/ 0 赞/ 430 阅读