jquery ajax局部加载方法详解(实现代码)


Posted in Javascript onMay 12, 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局部加载方法详解(实现代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
分享12个非常实用的JavaScript小技巧
May 11 #Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 #Javascript
Bootstrap组件(一)之菜单
May 11 #Javascript
Bootstrap 组件之按钮(二)
May 11 #Javascript
jQuery验证插件validate使用详解
May 11 #Javascript
JQuery validate插件验证用户注册信息
May 11 #Javascript
jQuery validate验证插件使用详解
May 11 #Javascript
You might like
小偷PHP+Html+缓存
2006/11/25 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
如何使用php实现评委评分器
2015/07/31 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
图文详解WinPE下安装Python
2016/05/17 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
关于保护环境的建议书
2014/08/26 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书