异步请求Ajax（取得json数据）

工程师啸喆技术 2022年11月22日

0 收藏 709 点赞 3,813 浏览 1220 个字

异步请求Ajax

没有学习Ajax之前请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源。但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异步请求来实现这种局部数据刷新的要求,异步请求简称 Ajax(Asynchronous Javascript And XML),在之前一般使用js 发送异步请求,请求的数据一般是xml,但是现在 json 出现之后就不使用xml 做为数据传输格式标准了。使用jQuery 发送异步请求,jq中的异步请求发送有很多方式，常见的方式有：

//方式一：
$.get( //发送一个get 请求   "test.cgi",//请求的地址   {name: "smith", time:"2pm" }, //传递服务端的数据　　function(data){ //回调函数,当请求成功之后,会自动调用该函数,data 服务端返回给客户端数据　　alert("Data Loaded: " + data);
　　},"json"); //表示请求的数据格式是json格式<script type="text/javascript" src="js/jquery.min.js"></script><Script type="text/javascript" src="js/login.js"></script></head><body><a href="javascript:void(0)" rel="external nofollow" >取得一个雇员信息</a>$(function(){　　// 为超链接绑定事件,点击之后会发送请求　　$("a").click(function(){
　　//发送请求　　$.get(　　"emp/get",　　{"id":7788}, function(data){　　lalert("服务器端返回的数据是:"+data);
　　},"json")
  })
})

$.getJSON(
　　"servlet0429/getOne",
　　{id:7788},
　　function(data){
　　alert(data)
            })            //ajax方式二    --%>

//方式三：
$.ajax({
                type:"post",
                url:"servlet0429/getOne",
                data:"id=7788",
                dataType:"json",
                async:false,    //实现在请求没有完全处理完之前锁定浏览器，不做后面的操作
                success:function(emp){
                    $("table").append("<tr><td>"+
                    emp.empno+"</td><td>"+
                    emp.ename+"</td><td>"+
                    emp.sal+"</td><td>"+
                    emp.comm+"</td><td>"+
                    emp.mgr+"</td><td>"+
                    emp.deptno+"</td><td>"+
                    emp.hiredate+"</td><td>"+
                    emp.job+"</td></tr>");
                }
            })