一分钟掌握异步操作(Ajax请求)(ajax异步请求是什么)
toyiye 2024-09-19 04:46 4 浏览 0 评论
1、所有浏览器均支持“jQuery中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="" url="{:U('Member/Cart/addCart',array('gid'=>$goods['gid']))}" id="addCart"></a>
var url = $('#addCart').attr('url');
第一种方式:get方式
$.get("{:U(GROUP_NAME.'/List/keywordsList')}",
{keyword:keyword},
function(data){
$('#message_tips').html(data.data['message']);
$('#task_tips').html(data.data['task']);
$('#event_tips').html(data.data['event'] );
$('#contract_tips').html(data.data['url'] );
},'json');
第二种方式:post方式
$.post('{:U(GROUP_NAME.'/List/keywordsList')}',
{ uid:uid,
passwd:passwd,
phone:phone
},
function(data){
$('#message_tips').html(data.data['message']);
$('#task_tips').html(data.data['task']);
$('#event_tips').html(data.data['event'] );
$('#contract_tips').html(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:'id='+department_id+'&num='+goodsNum,
async:false,
success:function(data){
options = '';
$.each(data.data, function(k, v){
options += '<option value="'+v.position_id+'">'+v.name+'</option>';
});
$("#role").html(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').html(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").html("<img src= "+MyformUrl+"Images/form1.png />");
}else{
$("#anameTip").html("用户名不存在!");
}
})
})
//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").html("<img src= "+MyformUrl+"Images/form1.png />");
}else{
$("#apwdTip").html("密码错误!");
}
})
})
//3、异步验证验证码
$("#verify").blur(function(){
var verify = $("#verify");
$.post(AjaxUrl+"/checkVerify",{verify:verify.val().trim()},function(stat){
if(stat==1){
$("#verifyTip").html("<img src= "+MyformUrl+"Images/form1.png />");
}else{
$("#verifyTip").html("验证码错误!");
}
})
})
服务器端:
/**
* 异步验证管理员帐号
*/
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 style="display: none;" id="treemodelprompt">
<span class="img"></span>
<span class="text"></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请求方法:
/* 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").html("?");
$("#treemodelprompt .text").html("操作成功!");
$("#treemodelprompt .img").css("color", "#5EBB29");
$("#treemodelprompt .text").css("color", "#5EBB29");
$("#treemodelprompt").slideToggle(500);
treemodelsetintervalset();
} else {
//alert("操作失败!");
$("#treemodelprompt .img").html("?");
$("#treemodelprompt .text").html("操作失败!");
$("#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--;
}
}
服务器端:
/**
* ajax数据排序操作
*/
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();
}
}
}
相关推荐
- 为何越来越多的编程语言使用JSON(为什么编程)
-
JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...
- 何时在数据库中使用 JSON(数据库用json格式存储)
-
在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...
- MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)
-
前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...
- JSON对象花样进阶(json格式对象)
-
一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...
- 深入理解 JSON 和 Form-data(json和formdata提交区别)
-
在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...
- JSON 语法(json 语法 priority)
-
JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...
- JSON语法详解(json的语法规则)
-
JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...
- MySQL JSON数据类型操作(mysql的json)
-
概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...
- JSON的数据模式(json数据格式示例)
-
像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...
- 前端学习——JSON格式详解(后端json格式)
-
JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...
- 什么是 JSON:详解 JSON 及其优势(什么叫json)
-
现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...
- PostgreSQL JSON 类型:处理结构化数据
-
PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...
- JavaScript:JSON、三种包装类(javascript 包)
-
JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...
- Python数据分析 只要1分钟 教你玩转JSON 全程干货
-
Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...
- 比较一下JSON与XML两种数据格式?(json和xml哪个好)
-
JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- r语言矩阵 (127)
- browsererror (114)
- exportexcel (119)
- cv2.bitwise_not (137)
- dump命令 (128)
- es6concat (126)
- heapify (127)
- java.security.egd (130)
- javax.annotation (117)
- jsstringsplit (117)
- js数字 (115)
- maven编译 (132)
- mysqlleft (128)
- nodejsbuffer (149)
- org.apache.commons.httpclient (126)
- org.jsoup (141)
- org.springframework.web (128)
- robotframework-ride (115)
- setnocounton (141)
- socket.gethostbyname (122)
- sqlmid (121)
- time.strptime (133)
- vscode格式化 (125)
- win32con (129)
- window.localstorage (126)