Ajax的使用

作者: Dxes | 来源:发表于2019-12-12 17:43 被阅读0次

HTML5权威指南 | 第五部分高级功能
ajax使用注意
Ajax 笔记
解决ajax获取数据的问题
jQuery中Ajax请求的使用和四个步骤示例
web开发笔记一ajax的使用(1)
Ajax （Asynchronous JavaScript An
ajaxmin（js，css压缩工具）
五、使用jQuery实现Ajax
ajax面试题

1.什么是Ajax - asyn javascript xml(异步js)
Ajax是由jQuery封装的专门用来做http请求的相关方法。和python中第三方库requests的功能一样

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
    </head>
    <body>
        
        <div id="box">
            
        </div>
        
        <script type="text/javascript">
            //1.ajax
            /*
             $.ajax({
                url:数据接口地址,
                type:请求方式(get/post),
                data:请求数据/参数(客户端传递给服务器的数据, 值是对象),
                success:请求成功的回调函数(函数),
                error:请求失败的回调函数
             })
             */
            $.ajax({
                type:"get",
                url:"http://rap2api.taobao.org/app/mock/233723/shopping",
                data:{username:'小明', password:'123456'},
                success:function(result){
                    console.log('请求成功！')
                    console.log(result)
                    for(var goods of result.data){
                        var name = goods.name
                        $('#box').append($('<p>'+name+'</p>'))
                        $('#box').append($('<img src="'+goods.goods_image+'" />'))
                        
                    }
                },
                error: function(){
                    console.log('请求失败')
                }
            });
            
            $.get("http://rap2api.taobao.org/app/mock/233723/shopping", {username:'小明', password:'123456'}, function(result){
                
                console.log('=====:', result)
            })
        
            
            
        </script>
        
    </body>
</html>