ajax是一种支持异步请求的技术（ajax异步调用）

ajax是一种支持异步请求的技术（ajax异步调用）
　　前言：1、所有浏览器均支持“jQuery中Ajax”，出错的原因大部分是：

　　ajax异步调用前言：

　　(1)有些jQuery中的内置函数，在某些浏览器中不支持==>在js代码中尽量少使用jQuery的内置函数，尽量放到PHP语言中去处理！

　　(2)异步请求的地址错误：地址不存在

　　2、jQuery“键盘事件”的注意事项：

　　一定要加上“event”事件，即：

　　$('#keywords').keyup(function(event){

　　showKeywordsList(event);

　　})

　　三种常用异步方式：get、post、ajax

　　调用格式：

　　$.get(url,[data],[callback],[type]);

　　$.post(url, [data], [callback],[type]);

　　参数：

　　url(String)：待载入页面的URL地址

　　data(可选)：待发送 Key/value 参数。

　　callback(可选) Function：载入成功时回调函数。

　　type(String)(可选)：返回内容格式，xml, html, script, json, text, _default。

　　url地址的两种传递方式：(1)第一种

　　<script>

　　var MyformUrl='/PHPxueba15/App/Modules/Admin/Tpl/Public/';

　　var AjaxUrl='/PHPxueba15/Admin/Article';

　　</script>

　　(2)第二种

　　<a href="http://sjzlt.cn/shuma/" url="{:U('Member/Cart/addCart',array('gid'=>$goods['gid']))}" ></a>

　　var url=$('#addCart').attr('url');

　　第一种方式：get方式

　　$.get("{:U(GROUP_NAME.'/List/keywordsList')}",

　　{keyword:keyword},

　　function(data){

　　$('#message_tips')(data.data['message']);

　　$('#task_tips')(data.data['task']);

　　$('#event_tips')(data.data['event'] );

　　$('#contract_tips')(data.data['url'] );

　　},'json');

　　第二种方式：post方式

　　$.post('{:U(GROUP_NAME.'/List/keywordsList')}',

　　{ uid:uid,

　　passwd:passwd,

　　phone:phone

　　},

　　function(data){

　　$('#message_tips')(data.data['message']);

　　$('#task_tips')(data.data['task']);

　　$('#event_tips')(data.data['event'] );

　　$('#contract_tips')(data.data['url'] );

　　},

　　'json');

　　服务器端：

　　3.1版本以后，ajaxReturn方法可以更加灵活的进行ajax传值，能够完全定义传值的数组和类型，例如：

　　$data['message']='信息';

　　$data['task']='info';

　　$data['event']='事件';

　　$data['url']=$url;

　　$this->ajaxReturn($data,'JSON');

　　第三种方式：ajax方式

　　$.ajax({

　　type:'GET',

　　url:'{:U(GROUP_NAME."/List/keywordsList/id/")}'+department_id,

　　data:'&num='+goodsNum,

　　async:false,

　　success:function(data){

　　options='';

　　$.each(data.data, function(k, v){

　　options +='<option value="'+v.position_id+'">'+v.name+'</option>';

　　});

　　$("#role")(options);

　　},

　　dataType:'json'

　　});

　　服务器端：

　　public function getPositionList() {

　　if($_GET[id]){

　　$m_position=M('position');

　　$where['department_id']=$_GET[id];

　　$position_list=$m_position->where($where)->select();

　　$this->ajaxReturn($position_list, "获取成功！", 1);

　　}else{

　　$this->ajaxReturn($position_list, "请选择部门！", 0);

　　}

　　}

　　1、注：async(Boolean)

　　(默认: true) 默认设置下，所有请求均为异步请求;

　　如果需要发送同步请求,请将此选项设置为 false;

　　注意,同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行;

　　2、有关dataType的相关说明：

　　dataType的默认数据格式是：html(默认输出的是html标签形式的数据)

　　json格式的数据:输出的是一个“对象”，按对象的方式调用数据

　　3、Ajax使用技巧

　　(1)如果前端只是想知道，服务端是否成功响应了

　　前端：dataType不用设置

　　服务器端:echo 0;-->表示失败

　　echo 1;-->表示成功

　　(2)如果前端想获得服务器端返回的数据

　　前端：dataType设置为“json”

　　服务器端：

　　$this->ajaxReturn($position_list, "获取成功！", 1);或者

　　$this->ajaxReturn($result,'JSON');

　　exit(json_encode($result));

　　例1：

　　服务器端：

　　$data['message']='信息';

　　$data['task']='info';

　　$data['event']='事件';

　　$data['url']=$url;

　　$this->ajaxReturn($data,'JSON');

　　前端：

　　$('#message_tips')(data.data['message']);

　　例2：

　　服务器端：

　　$result=array(

　　'status'=>true,

　　'num'=>$num

　　);

　　exit(json_encode($result));

　　前端：

　　oGoodsNum.val(result.num);

　　例3：

　　前端：dataType设置为“html”

　　$this->ajaxReturn('<div>测试</div>', "获取成功！", 1);

　　应用实例：(1)用户/管理员登录验证实例

　　前端：

　　第一步：设置请求的URL地址

　　<script>

　　var MyformUrl='/PHPxueba15/App/Modules/Admin/Tpl/Public/';

　　var AjaxUrl='/PHPxueba15/Admin/Article';

　　</script>

　　第二步：异步请求

　　//1、异步验证用户名

　　$("#aname").blur(function(){

　　var aname=$("#aname");

　　$.post(AjaxUrl+"/checkAname",{aname:aname.val().trim()},function(stat){

　　if(stat==1){

　　$("#anameTip")("<img src="http://sjzlt.cn/shuma/+MyformUrl+"Images/form1.png />");

　　}else{

　　$("#anameTip")("用户名不存在！");

　　}

　　})

　　})

　　//2、异步验证密码

　　$("#apwd").blur(function(){

　　var apwd=$("#apwd");

　　var aname=$("#aname");

　　$.post(AjaxUrl+"/checkApwd",

　　{apwd:apwd.val().trim(),aname:aname.val().trim()},

　　function(stat){

　　if(stat==1){

　　$("#apwdTip")("<img src="http://sjzlt.cn/shuma/+MyformUrl+"Images/form1.png />");

　　}else{

　　$("#apwdTip")("密码错误！");

　　}

　　})

　　})

　　//3、异步验证验证码

　　$("#verify").blur(function(){

　　var verify=$("#verify");

　　$.post(AjaxUrl+"/checkVerify",{verify:verify.val().trim()},function(stat){

　　if(stat==1){

　　$("#verifyTip")("<img src="http://sjzlt.cn/shuma/+MyformUrl+"Images/form1.png />");

　　}else{

　　$("#verifyTip")("验证码错误！");

　　}

　　})

　　})

　　服务器端：

　　Public function checkAname () {

　　if (!$this->isAjax()) halt('页面不存在');

　　$aname=$this->_post('aname');

　　$where=array('aname'=> $aname);

　　if (M('admin')->where($where)->find()) {

　　echo 1;

　　} else {

　　echo 0;

　　}

　　}

　　Public function checkApwd () {

　　if (!$this->isAjax()) halt('页面不存在');

　　$aname=$this->_post('aname');

　　$apwd=$this->_post('apwd', 'md5');

　　$where=array('aname'=> $aname);

　　$password=M('admin')->where($where)->getField('apwd');

　　if ($password && $password==$apwd) {

　　echo 1;

　　} else {

　　echo 0;

　　}

　　}

　　Public function checkVerify () {

　　if (!$this->isAjax()) halt('页面不存在');

　　if ($_SESSION['verify']==$this->_post('verify', 'strtolower')) {

　　echo 1;

　　} else {

　　echo 0;

　　}

　　}

　　(2)异步请求弹窗

　　前端：

　　弹窗模板：

　　<div >

　　<span ></span>

　　<span ></span>

　　</div>

　　失去焦点后请求：

　　$(".treemodelupdatesortclick").live("blur", function() {

　　var valueid=$(this).next().text();//主键值

　　var sortvalue=$(this).val();//排序值

　　var id=$(this).next().next().text();//主键字段名

　　var sort=$(this).next().next().next().text();//排序字段名

　　var data=id+"="+valueid+"&"+sort+"="+sortvalue;

　　var type='sort';

　　treemodelajax(data,type);

　　});

　　Ajax请求方法：

　　function treemodelajax(data,type) {

　　$.ajax({

　　url:url+'/Classification/'+type,

　　type:"post",

　　data:data,

　　dataType:"json",

　　success:function(data) {

　　if(data==1) {

　　//alert("操作成功！");

　　$("#treemodelprompt .img")("?");

　　$("#treemodelprompt .text")("操作成功！");

　　$("#treemodelprompt .img").css("color", "#5EBB29");

　　$("#treemodelprompt .text").css("color", "#5EBB29");

　　$("#treemodelprompt").slideToggle(500);

　　treemodelsetintervalset();

　　} else {

　　//alert("操作失败！");

　　$("#treemodelprompt .img")("?");

　　$("#treemodelprompt .text")("操作失败！");

　　$("#treemodelprompt .img").css("color", "#F00");

　　$("#treemodelprompt .text").css("color", "#F00");

　　$("#treemodelprompt").slideToggle(500);

　　treemodelsetintervalset();

　　}

　　}

　　});

　　}

　　倒计时关窗：

　　var i=5;

　　function treemodelsetintervalset() {

　　i=5;

　　setInterval("treemodelsetinterval()", 1000);

　　}

　　function treemodelsetinterval() { //倒计时关闭跳转窗口

　　if(i==1) {

　　$(document).ready(function() {

　　$("#treemodelprompt").slideUp(500);

　　});

　　} else {

　　i--;

　　}

　　}

　　服务器端：

　　public function sort(){

　　//学期排序

　　if(false==empty($_POST['srid'])) {

　　$where=array('srid'=>$_POST['srid']);

　　$Statu=M('semester')->where($where)->setField("srsort", $_POST['srsort']);

　　if($Statu) {

　　echo 1;exit();

　　} else {

　　echo 0;exit();

　　}

　　}

　　//班级排序

　　if(false==empty($_POST['cid'])) {

　　$where=array('cid'=>$_POST['cid']);

　　$Statu=M('class')->where($where)->setField("csort", $_POST['csort']);

　　if($Statu) {

　　echo 1;exit();

　　} else {

　　echo 0;exit();

　　}

　　}

　　}

　　上面就是小居数码小编今天给大家介绍的关于（ajax异步调用）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

　　94%的朋友还想知道的：

　　什么是pgp加密技术（什么是pgp加密软件）

　　虚拟3D软件（3d类游戏与虚拟现实技术）

　　php的技术php搜索技术（php的关键字）

　　wifi7是一项什么技术（wifi7的原理）



　　155107
 

版权声明：本站所有文章皆为原创，欢迎转载或转发，请保留网站地址和作者信息。

很赞哦！ ()