使用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操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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同时支持GIF、png、JPEG
2006/10/09 PHP
php安装swoole扩展的方法
2015/03/19 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
js实现小时钟效果
2020/03/25 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
js制作提示框插件
2020/12/24 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
解决Python3下map函数的显示问题
2019/12/04 Python
Python必须了解的35个关键词
2020/07/16 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
香港交友网站:be2香港
2018/07/22 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
大学毕业感言
2014/01/10 职场文书
教师档案管理制度
2014/01/23 职场文书
留学生求职信
2014/06/03 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers