使用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 相关文章推荐
Javascript中暂停功能的实现代码
Mar 04 Javascript
js window.onload 加载多个函数的方法
Nov 02 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
浅谈javascript的闭包
Jan 23 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
vue使用原生swiper代码实例
Feb 05 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
PHP小技巧之函数重载
2014/06/02 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
python通过cython加密代码
2020/12/11 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
村抢险救灾方案
2014/05/09 职场文书
财务人员担保书
2014/05/13 职场文书
抵押贷款承诺书
2014/05/30 职场文书
城市创卫标语
2014/06/17 职场文书
励志演讲稿200字
2014/08/21 职场文书
大学生实训报告总结
2014/11/05 职场文书
语文教师个人工作总结
2015/02/06 职场文书
花木兰观后感
2015/06/10 职场文书
golang正则之命名分组方式
2021/04/25 Golang
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL