使用jQuery加载html页面到指定的div实现方法


Posted in Javascript onJuly 13, 2016

一、jQuery加载一个html页面到指定的div里

把a.html里面的某一部份的内容加载到b.html的一个div里。

比如:加载a.html里面的<div id=“row"></div>这个div里面的所有内容加载到b.html的这个div里<div id="content"></div>

用jquery ajax 可以实现

假设 a.html 和b.html在同一目录

b.html

<script >
$(document).ready(function() {
  bodyContent = $.ajax({
    url: "b.html",
    global: false,
    type: "POST",
    data: ({
      id: this.getAttribute('row')
    }),
    dataType: "html",
    async: false,
    success: function(msg) {
      alert(msg);
    }
  })
});
</script>

二、juqery $.ajax 请求另一个html页面的指定的“一部分”加载到本页面div,重点是一部分数据加载到本页面div

大至思路如下:

$.ajax( {
    url: url, //这里是静态页的地址
    type: "GET", //静态页用get方法,否则服务器会抛出405错误
    success: function(data){
      var result = $(data).find("另一个html页面的指定的一部分");
      $("本页面div").html(result);


    }
});

或参考下面的代码:

$(function(){
   $.ajax({
      type:"POST",
      url:"LoginLoadArticle.ashx",
      data: "type="+escape("最新公告") ,
      success:function(msg){
        $(".gonggao").html(msg);
      },
      error:function(XMLHttpRequest, textStatus, thrownError){}
    })
   
})

如果参数不明白可以参考

三、JQuery中$.ajax()方法参数详解及应用

以上这篇使用jQuery加载html页面到指定的div实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
AngularJS转换响应内容
Jan 27 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 #Javascript
javascript类型系统——undefined和null全面了解
Jul 13 #Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 #Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 #Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 #Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 #Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 #Javascript
You might like
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
教大家制作简单的php日历
2015/11/17 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
python select.select模块通信全过程解析
2017/09/20 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
Python hashlib模块加密过程解析
2019/11/05 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
异步传递消息系统的作用
2016/05/01 面试题
中医药大学毕业生自荐信
2013/11/08 职场文书
初中差生评语
2014/12/29 职场文书
教师年度考核个人总结
2015/02/12 职场文书
运动会宣传稿100字
2015/07/23 职场文书
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技
如何Python使用re模块实现okenizer
2022/04/30 Python