使用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 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
jQuery 技巧大全(新手入门篇)
May 12 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
动态加载js文件简单示例
Apr 21 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
PHP使用者状态管理功能的应用
2006/10/09 PHP
PHP编程风格规范分享
2014/01/15 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
python执行get提交的方法
2015/04/29 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python实现图书借阅系统
2019/02/20 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
大学生新学期计划书
2014/04/28 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
python基础之爬虫入门
2021/05/10 Python
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记
如何基于python实现单目三维重建详解
2022/06/25 Python