jQuery Ajax页面局部加载方法汇总


Posted in Javascript onJune 02, 2016

在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考。

$.ajax({
url: "hotelQuery!queryHotelByCity.action",
type: "post",
dataType: "html",
data: "queryHotel.city="+cityobj.value+"&queryHotel.wbcid="+wbcid,
success: function(data){
$("#hotellists").html($(data).filter("#list").html());
}
});

代码解析:

从上面的代码我们可以看出,返回的数据是data,但是我们如果在要ajax请求的页面的那部分用id为list的一个DIV包围起来,这样我们通过$(data).filter("#list").html()就可以拿到DIV中的HTML内容

实例

$(document).ready(function(){
function loadMessage()
{
$(this).html("loading...");
var o = this;
var xmlhttp = $.ajax({
url:"Service/IndexLogin.aspx",
dataType:"html",
success:function(result)
{
$(o).html(result);
}
});
}
loadMessage.call($("#addinfo"));
});
<form action="#" method="post">
<ul id="addinfo">
加载中...
</ul>
</form>

上面我们使用的是的方法,其实还有更简单的办法哦,load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中

$(document).ready(function(){
$("#addinfo").load("Service/IndexLogin.aspx", $("#addinfo li")); 
})

1.加载一个php文件,该php文件不含传递参数$("#myID").load("test.php");

//在id为#myID的元素里导入test.php运行后的结果

2. 加载一个php文件,该php文件含有一个传递参数

$("#myID").load("test.php",{"name" : "Adam"});

//导入的php文件含有一个传递参数,类似于:test.php?name=Adam

3. 加载一个php文件,该php文件含有多个传递参数。注:参数间用逗号分隔

$("#myID").load("test.php",{"name" : "Adam" ,"site":"61dh.com"});

//导入的php文件含有一个传递参数,类似于:test.php?name=Adam&site=61dh.com

4. 加载一个php文件,该php文件以数组作为传递参数

$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});

//导入的php文件含有一个数组传递参数。

下面给大家介绍Jquery Ajax 页面局部更新

Ajax 是一个异步过程,页面中的一部分代码发出一个网络请求,在里面设置一个回调函数,如果网络请求得到返回,那么执行回调函数。在回调函数中的上下文和时间触发的上下文会有所不同,在jquery中的应用需求大多数时候是这样的。比如我点击了一个按钮,这个按钮是一个 tr 中的 td 中的内容,我可以通过这个点击时间确定当前行的任何属性,或者确定当前也面中的任何一个属性,只要这个页面的布局是又某种可控的过滤的话。需要实用到this关键字。还有就是 find() 方法。比如this.parent().find('tr:eq(3)'); 这是找到所有的tr中的第3个元素。

下面是两个示例js函数,第一个是的重点是对必须内容的获取,通过jquery可以很方便的拿到我们需要的元素的内容。然后用这个内容实现其他的功能,同事还用jquery的方式对页面进行操作,jquery在页面展示中的强大作用,可见一斑。第二个函数主要是通过jquery 的ajax方式 调用指定接口,完成数据操作,然后将数据更新在页面上。ajax的目的是局部更新页面,有时候刷新页面是很不方便的。

function openRej()
{
// 通过jquery找到当前链接同行的其他内容,这里拿到了ID。
id = $(this).parent().parent('tr').find('td:eq(0)').html();
$("#TB_overlayBG").css({
display:"block",height:$(document).height()
});
$(".box").css({
left:($("body").width()-$(".box").width())/2-20+"px",
top:($(window).height()-$(".box").height())/2+$(window).scrollTop()+"px",
display:"block"
});
current_id = id;
}
// 点击某个时间出发这个函数 来对页面进行局部更
function doReject(){
var obj = $(".box input:checked");
var rej_reason = '';
var other = $("#otherbox #other_reject_reason").val();
rej_reason +="`"+other;
if(rej_reason == "`"){
window.alert('亲,至少要填写一个原因哦!');
return ;
}
url = "youurl?id="+current_id+"&reject_reason="+rej_reason;
$.getJSON(url,function(data){
// data 是从请求获得的数据。
if(data.msg == true){
// update data in current line.
color = get_color(data.status);
$("#rej_reason"+current_id).text(data.rea);
status_text = gen_status_text(data.status);
// 更新页面中对应的内容。
$("#status"+current_id).text(status_text);
$("#status"+current_id).css('color',color);
// 执行其他的操作
closeCeng();
}else {
alert('更新失败');
}
}); 
}
Javascript 相关文章推荐
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 #Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 #Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 #Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 #Javascript
Jquery获取第一个子元素简单实例
Jun 02 #Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 #Javascript
javascript三种代码注释方法
Jun 02 #Javascript
You might like
解析php多线程下载远程多个文件
2013/06/25 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
php文件上传简单实现方法
2015/01/24 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JSON格式化输出
2014/11/10 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
jQuery的框架介绍
2016/05/11 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
对python中Json与object转化的方法详解
2018/12/31 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
体育专业个人求职信范文
2013/12/27 职场文书
会议邀请书范文
2014/02/02 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
高中团支书竞选稿
2015/11/21 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL