使用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 相关文章推荐
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
解决layer.prompt无效的问题
Sep 24 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
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
php精度计算的问题解析
2019/06/21 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Python ZipFile模块详解
2013/11/01 Python
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
Python加速程序运行的方法
2020/07/29 Python
Python识别验证码的实现示例
2020/09/30 Python
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
辩论赛主持词
2014/03/18 职场文书
纪检监察建议书
2014/05/19 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
2014年教师思想工作总结
2014/12/03 职场文书