ajax

 

ajax

   ajax全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分。不是新的编程语言,而是一种使用现有标准的新方法。

同步请求和异步请求

异步请求

        通过js代码发起异步请求,属于局部更新(页面只有部分内容重新加载)。

同步请求

         每次从浏览器中发送请求(点击超链接的都是同步请求)。属于全局更新。        

注意

       对于ajax来说,就可以异步请求也可以同步请求,通过设置async即可。如果是异步请求,如果后台有延迟,很可能造成接收不到返回的数据。

     

jQuery中的ajax函数

       格式如下:ajax里面包含一个或多个键值对形式

$.ajax({name:value, name:value, ...});

      有如下键值对:

名称值/描述
async布尔值,表示请求是否异步处理。默认是 true。true表示异步请求,false表示同步请求。
beforeSend发送请求前运行的函数。
cache布尔值,表示浏览器是否缓存被请求页面。默认是 true。
complete请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。
contentType发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。
context为所有 AJAX 相关的回调函数规定 "this" 值。
data规定要发送到服务器的数据。
dataType预期的服务器响应的数据类型。
error如果请求失败要运行的函数。
global布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp在一个 jsonp 中重写回调函数的字符串。
jsonpCallback在一个 jsonp 中规定回调函数的名称。
password规定在 HTTP 访问认证请求中使用的密码。
processData布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset规定请求的字符集。
success当请求成功时运行的函数。
timeout设置本地的请求超时时间(以毫秒计)。
traditional布尔值,规定是否使用参数序列化的传统样式。
type规定请求的类型(GET 或 POST),默认为GET
url规定发送请求的 URL。默认是当前页面。
username规定在 HTTP 访问认证请求中使用的用户名。
xhr用于创建 XMLHttpRequest 对象的函数。

一个简单的案例

<script type="text/javascript">
    $(".disSC").click(function(){
        //设置要分配的人员信息
        $.ajax({
            url:"${pageContext.request.contextPath}/user/ajaxAllUserByRoleId.do?rId=3",
            type:"get",
            success:function(data){
                //data是返回的数据,是字符串类型,将字符串转换为JSON对象
                data = JSON.parse(data);
                var strHtml="";
                for(var i = 0; i < data.length; i++){
                    var uName = data[i].uName;
                    var uId = data[i].uId;
                    var uAccount = data[i].uAccount;
                    //拼接,设置用户id和用户名称
                    strHtml+="<option value='"+uId+"'>账户"+uAccount+":"+uName+"</option>";
                }
                $(".form-control").html(strHtml);
            }
        });
    });
</script>

请求数据类型

  • 请求数据为form表单提交数据的格式

           使用$("form").serialize(),将表单中所有数据序列化为key=value&key=value&key=value...的形式。如下所示:

$("#submit").click(function(){
    //获取到表单提交的数据
    var str = $("form").serialize(); // serialize()只能是form表单才有的方法
    $.ajax({
        url:"login.do?"+str,
        ...
    })
});
  • 请求参数是JSON对象

          请求参数如:{"name":"admin", "password":"123"}JSON形式,使用如下:

 $("#submit").click(function(){
    //获取到表单提交的用户名和密码数据
    var uName = $("#login_msg input").eq(0).val();
    var uPassword = $("#login_msg input").eq(1).val();
    //创建JSON数据对象
    var str = {"uName":uName, "uPassword":uPassword,"remember":remember};
    $.ajax({
        url:"login.do",
        data:str,
        ...
    })
});
  • 请求参数是JSON格式的字符串

         使用JSON.stringify(xxx)将JSON对象转换为JSON格式的字符串。请求参数是JSON格式字符串如下所示:

 $("#submit").click(function(){
    //获取到表单提交的用户名和密码数据
    var uName = $("#login_msg input").eq(0).val();
    var uPassword = $("#login_msg input").eq(1).val();
    //创建JSON数据对象
    var str = {"uName":uName, "uPassword":uPassword,"remember":remember};
    $.ajax({
        url:"login.do",
        data:JSON.stringify(str),
        ...
    })
});

      在 controller中获取数据的方式, 需要使用注解@RequestBody,如下所示:

@RequestMapping("login.do")
public String login(@RequestBody User user ) {
    ...
}

响应请求返回数据

       后端Controller类响应请求返回数据有两种形式:

  • 返回值是List和Object

         会自动将返回值转换为JSON格式的字符串,如下所示:

@RequestMapping("allUserAjax.do")
@ResponseBody
public List<User> getAllUsers(int roleId){
    return uService.getUsers(roleId);
}
  • 返回值是String

       需要拼出一个JSON格式的字符串,如下所示:

@RequestMapping("update.do")
@ResponseBody
public String update(){
    //说明,可以返回多个key-value格式的数据,返回的是{"update":true}
    return  "{\"update\":true}" ;   
}
               
@RequestMapping("update.do")
@ResponseBody
public String update(){
    //返回的就是一个字符串
    return  "abc";  
}

 

遍历JSON对象数据

      jQuery的ajax得到的响应数据是JSON格式的字符串数据,需要将其转换为JSON对象。如下所示:

$("xx").click(function(){
    //调用发送异步请求的函数
    $.ajax({
        url:"xxx",   //请求地址
        data:{...},   //请求参数
        type:post/get,
        dataType:"json",
        //请求成功(返回状态码为200)后执行的函数。data就是响应的数据
        success:function(data){  
            //data是字符串形式的JSON数据,将其转换为JSON对象
            data = JSON.parse(data);
        }    
    })
});

        

1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看REAdMe.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看REAdMe.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看READme.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 、 1资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看READmE.文件(md如有),本项目仅用作交流学习参考,请切勿用于商业用途。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

luckyliuqs

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值