使用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 相关文章推荐
JAVASCRIPT keycode总结
Feb 04 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
移动端效果之IndexList详解
Oct 20 Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
用原生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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
PHP截取中文字符串的问题
2006/07/12 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
php微信开发之百度天气预报
2016/11/18 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
js window.event对象详尽解析
2009/02/17 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
Python实现图片转字符画的示例
2017/08/22 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
pandas中去除指定字符的实例
2018/05/18 Python
python递归实现快速排序
2018/08/18 Python
python 自动重连wifi windows的方法
2018/12/18 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
函授毕业自我鉴定
2014/02/04 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
明确岗位职责
2015/02/14 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
导游词之山海关
2019/12/10 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
Java基础之this关键字的使用
2021/06/30 Java/Android
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python