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 相关文章推荐
js验证是否为数字的总结
Apr 14 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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 adodb介绍
2009/03/19 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
php自定义session示例分享
2014/04/22 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
会计电算化专业自荐信
2014/03/15 职场文书
企业授权委托书范本
2014/04/02 职场文书
父母寄语大全
2014/04/12 职场文书
超市创业计划书
2014/04/24 职场文书
办理护照工作证明
2014/10/10 职场文书
国情备忘录观后感
2015/06/04 职场文书
同意报考证明
2015/06/17 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
图神经网络GNN算法
2022/05/11 Python