使用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基础资料整理3 正则
Dec 06 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 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实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
vue图片上传组件使用详解
2019/12/23 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
Python中自定义函数的教程
2015/04/27 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
python实现大学人员管理系统
2019/10/25 Python
np.dot()函数的用法详解
2020/01/17 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
逃课检讨书
2015/01/26 职场文书
纪律委员竞选稿
2015/11/19 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
导游词之临安白水涧
2019/11/05 职场文书
openstack中的rpc远程调用的方法
2021/07/09 Python
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers