ajax笔记

介绍：ajax，用于客户端与web服务器进行交互数据，并由最初的全局页面   同步加载刷新  升级为  局部、异步加载刷新

优点：页面加载更快了 ； 

eg1:

jquery 中的load函数一般用于在某个位置异步加载某个url页面

$(function(){
    $("#load-role-id").click(function(){
    		//异步加载url对应的资源,并将资源插入到.container-fluid位置
      	    $(".container-fluid").load("role/listUI.do");
    }) 
})

$("body").load("listUI.do",{color:red},function(){
   …..
});

eg2:

同步加载和异步加载的区别：

异步：异步的链接可以同时发起多个 ； 不会阻止JS代码的执行；每次只刷新需要更换部分的内容； 同步：同一时刻只能发起一个；每次刷新的是整个页面 ；

eg3:

Jquery中的getJSON函数用于向服务端发起Ajax GET请求获取json格式的数据；

格式:$.getJSON("url",[data], [callback])

$(function(){
	   $("#pageId").load("pageUI.do",function(){
		   //异步加载服务端数据然后进行呈现
		  doGetObjects();
	   });
   })

function doGetObjects(){   //1.向服务端发起异步(ajax)请求(ajax,getJSON,post,load)   //2.通过响应结果(数据)更新页面   var url="role/doFindPageObjects.do"   var pageCurrent=$("#pageId").data("pageCurrent");   if(!pageCurrent)pageCurrent=1;  //为了实现能查询本页没有的内容   var params={"pageCurrent":pageCurrent};//"pageCurrent=1"   $.getJSON(url,params,function(result){//将结果封装到result中   if(result.state==1){  //console.log(result.data);  //更新角色表格数据  setTableBodyRows(result.data.records)  //更新分页数据  setPagination(result.data);   }else{   alert(result.message);   }   });    }

eg4:当查询按钮被点击时,依据条件向服务端发送异步请求获取数据.

$(".input-group-btn")    .on("click",".btn-search",doQueryObjects)

eg5:  发异步post请求根据id删除数据

post函数应用，post(url,[data],[callback])

	  //2.发异步post请求根据id删除数据
	  var url="role/doDeleteObject.do";
	  var params={"id":ids[0]};
	  $.post(url,params,function(result){//jsonResult
		  if(result.state==1){
			 alert(result.message);
			 doGetObjects();
			 //假如需要局部刷新,可参考如下代码(重点理解思路)
			 //var input=$("#tbodyId input[value='"+ids[0]+"']");
			 //var tr=input.parent().parent();
			 //tr.remove();
		  }else{
			 alert(result.message);
		  }
	  });

eg6：juqery 中的ajax函数用于向服务端发起一个异步的ajax请求.

$.ajax({
    url: "address", 
    type:”GET”,
    data: { param1: "foo bar", param2: "baz“ },
    dataType: "json",
    success: successHandlerFunction, 
    error: errorHandlerFunction, 
    cache: false, 
})