使用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 相关文章推荐
列表内容的选择
Jun 30 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
javascript几个易错点记录
Nov 26 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 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实现HTML生成PDF文件的方法
2014/11/07 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python检测QQ在线状态的方法
2015/05/09 Python
python实现音乐下载器
2018/04/15 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
Python中@property的理解和使用示例
2019/06/11 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
早读迟到检讨书
2014/01/24 职场文书
学校节能减排方案
2014/06/13 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
公务员政审材料
2014/12/23 职场文书
检讨书格式范文
2015/05/07 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android