博客

目录

局部刷新和无刷新

同源策略

1.熟悉jquery选择器， 去页面上获取发送ajax请求时的参数数据2.发送ajax请求3.将返回数据加载到页面：通过jquery操作页面元素和属性

示例：登录界面发送ajax请求

ajax技术的目的是让javascript发送http请求与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，然后使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

局部刷新和无刷新

ajax可以实现局部刷新，也就是无刷新。无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面不会整体刷新；ajax获取到后台数据，只更新页面上需要显示数据的部分，这就做到了页面的局部刷新。

同源策略

ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。

前端页面登录时通过ajax发送请求处理的流程： 1.输入用户名密码后，点击提交按钮，js做获取用户名和密码的操作，并对信息加密；

2.加密后的信息通过ajax发送http请求到后台，后台对发送过来的信息解密，解密后与数据库中的用户名密码做对比；对比成功，返回成功的信息，对比失败返回失败的信息。

1.熟悉jquery选择器， 去页面上获取发送ajax请求时的参数数据

2.发送ajax请求

3.将返回数据加载到页面：通过jquery操作页面元素和属性

jquery 在线手册

示例：登录界面发送ajax请求

$function(){
    // ajax请求: 点击登录按钮时触发ajax请求
    $('.login').click(){
        // 获取账号和密码
        var user=$('#username').val()   // 获取id为username的输入框元素的value值
        var pwd=$('#password').val()    // 获取id为password的输入框的value

        // 加密
        // ajax发送请求  同源策略
        $.ajax({
            method:"POST",
            url:'/login',   // 请求url,会跟发送ajax请求的当前页面的url进行拼接
            data:{'user':user,"pwd":pwd},   // ajax请求时携带的请求参数
            dataType:'json'，    // ajax发送请求后期望得到的返回数据的类型，会对返回的数据按照json解析
        }).done(function(data){     // ajax发送请求成功后执行的代码，data代表function的参数
            if(data.code==='1'){    // 请求成功后根据返回值判断是否登录成功，登录成功后需要执行的逻辑
                alert(data.msg)
            }else{                  // 请求成功后根据返回值判断是否登录成功，登录失败后需要执行的逻辑
                alert(data.msg)
            }
        }).fail(function(){     // ajax发送请求失败时执行的代码
            alert('ajax发送请求失败')
        })

        // ajax发送请求  跨域请求
        //（需要跨域请求的后台开发设置支持该后台服务跨域请求才行。allowed_cross_request)
        $.ajax({
            method:"POST",
            url:'https://www.baidu.com/login',   // ajax跨域请求的url,
            data:{'user':user,"pwd":pwd},   // 被跨域请求的服务ajax请求时携带的请求参数
            dataType:'jsop'，    // ajax发送请求后期望得到的返回数据的类型,得到的数据会用jsonp解析
        }).done(function(data){     // ajax发送请求成功后执行的代码，data代表function的参数，一般是返回回来的响应数据
            if(data.code==='1'){    // 请求成功后根据返回值判断是否登录成功，登录成功后需要执行的逻辑
                alert(data.msg)
            }else{                  // 请求成功后根据返回值判断是否登录成功，登录失败后需要执行的逻辑
                alert(data.msg)
            }
        }).fail(function(){     // ajax发送请求失败时执行的代码
            alert('ajax发送请求失败')
        })

        // 获取项目列表，并将获取到的数据添加到页面
        var pro=$("#pro");
        $.ajax({
            url:'/pro_list', //项目列表的url路由
            method:"get",
            dataType:"json",
            }).done(function(data){
                var pro=$("#pro");
                var res=data.data;  // data表示为响应数据;data.data代表响应体中的data
                // 遍历数据
                for(i in res){
                    var option='<option value='+res[i].id+'>'+res[i].title+'</option>';
                    pro.append(option);
                }
            });

// 1.熟悉jquery选择器， 去页面上获取发送ajax请求时的参数数据
// 2.发送ajax请求
// 3.将返回数据加载到页面：通过jquery操作页面元素和属性
        // change事件： 检测元素值是否发生变化
        pro.change(function(){
            // 往接口列表发送ajax请求，请求参数为：pro_id
            var pro_id= pro.val();
            $.ajax({
                url:'interface',
                data:{"pro_id":pro_id},
                method:"post",
                dataType:'json'
            }).done(function(data){
                // 获取接口下拉框
                var inter=$('#interface');
                if(data.code==='1'){
                    // 清空该选择框原有的数据
                    inter.empty();
                    var res=data.data;
                    // 遍历返回的数据，加载到页面
                    for(var i=0;i<res.length;i++){
                        var option='<option value="">'+res[i].name+'</option>';
                        inter.append(option);
                    }
                }
            })
        })   
    }
}