用户名:  密码:   
您当前的位置:首页 > 

109讲 jQuery.ajax(options),jQuery.get,jQuery.post,jQuery.(selector).load()用法及其一些使用例子

上次修改时间: 2016-04-04 14:49:32      来源:网络总结      作者:钢铁长陈
上一页      路径:DSD\Learn\javascript,ajax,jquery,dom\jQuery教程\PHP100视频教程jQuery部分\      下一页

jQuery.ajax(options),jQuery.get,jQuery.post,jQuery.(selector).load()用法及其一些使用例子

下面有一些是底层实现
一、jQuery.ajax(options),主要用来完成异步传输,即不用刷新
1. jQuery有完整的Ajax兼容套件,不用再考虑浏览器是否兼容ajax
 常用的一些参数及其描述
 url  //发送请求的地址,默认是当前地址
 type //请求类型,POST或GET,默认是get方式
 timeout //超时时间
 async //异步请求,默认true
 Data //发送的参数,可以是json类型,以前参数间用&,这里参数与值用冒号分开,参数间用分号
 dataType //返回的数据类型:xml,html,json,txt,定制返回数据类型
 success //成功后可以返回function(data,st){},返回的数据要反映到的地方
例子:
 $.ajax({
  type:"GET",
  url:"php.php",
  data:{PHP:"100",Name:"Jquery"},
  success:function(data,st){
   $("div#asd").html(data);
  }
 })
 <div id="asd"><h2>通过AJAX调用内容</h2><div>
 
二、jQuery.get和post,比第上面那个简单,不需要再给type了
1. jQuery.get(url,data,callback,type)
2. jQuery.post(url,data,callback,type)
 //url是待载入面面的url地址,要提交到的页面
 //data待发送Key/value参数,同ajax的data参数
 //callback载入成功时回调函数
 //type 返回内容格式,xml,html,script,json,text,_default.
类似模式:$.ajax({type:'POST',url:url,data:data,success:success,dataType:txt});

三、load方法,比上面都更简单,直接反映到指定的元素selector上
jQuery.(selector).load(url,data,callback,)
 $(docement).ready(function(){
  $("buttion").click(function(){
  $('Div').load('php100.php',{name:'123'},function(){});
  });
 });

四、一些例子
<?php
 echo $_POST['name'];
?>
<div>这里是要显示的地方</div> //只有一个div,不用要id
用ajax方式:
 $(document).ready(function(){ //调用doucment对象下的ready方法
  $("button").click(function(){  //调用DOM元素的方法,DOM元素可理解为html中的标签
   $.ajax({
    type:"POST",
    url: "php.php",
    data: {name;"123456789"},
    success:function(data,st){
     $("div").html(data);
    });
   }); 
  });
 });
用POST方式:
 $(document).ready(function(){ //调用doucment对象下的ready方法
  $("button").click(function(){  //调用DOM元素的方法,DOM元素可理解为html中的标签
   $.post("php.php",{name:"12345"},function(data){
   $("div").html(data);
   },"html");
  });
 });
用load方式:
 $(document).ready(function(){ //调用doucment对象下的ready方法
  $("button").click(function(){  //调用DOM元素的方法,DOM元素可理解为html中的标签
   $(div).load("php.php",{name:"555555"});
  });
 });