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 的addEventListener()及attachEvent()区别分析
May 21 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
php获取url参数方法总结
2014/11/13 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
js 处理数组重复元素示例代码
2013/12/27 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
Python使用OpenCV进行标定
2018/05/08 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
自我鉴定范文300字
2013/10/01 职场文书
《乌塔》教学反思
2014/02/17 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
二审答辩状格式
2015/05/22 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby