使用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 获取Listbox选择的值的代码
Apr 15 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
简单的渐变轮播插件
Jan 12 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
用原生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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
机械专业应届生求职信
2013/09/21 职场文书
工程总经理工作职责
2013/12/09 职场文书
人事档案接收函
2014/01/12 职场文书
辞职书格式样本
2015/02/26 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏
小程序自定义轮播图圆点组件
2022/06/25 Javascript