ajax发送请求实例使用

  • Post author:
  • Post category:其他



目录


局部刷新和无刷新


同源策略


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);
                    }
                }
            })
        })   
    }
}



版权声明:本文为qq_40132294原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。