使用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 相关文章推荐
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
js本地图片预览实现代码
Oct 09 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
vue.js计算属性computed用法实例分析
Jul 06 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后台如何避免用户直接进入方法实例
2013/10/15 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
jquery等待效果示例
2014/05/01 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
详解Python中is和==的区别
2019/03/21 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
Python实现微信小程序支付功能
2019/07/25 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
本科毕业生专业自荐书范文
2014/02/05 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
公司表扬信格式
2015/05/04 职场文书
运动会加油稿30字
2015/07/21 职场文书
老人院义工活动感想
2015/08/07 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL