使用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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
JS中Array数组学习总结
Jan 18 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
微信小程序实现手势滑动效果
Aug 26 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
Protoss兵种介绍
2020/03/14 星际争霸
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
Laravel框架表单验证详解
2014/09/04 PHP
php异常处理方法实例汇总
2015/06/24 PHP
总结一些js自定义的函数
2006/08/05 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
利用python代码写的12306订票代码
2015/12/20 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
python 获取等间隔的数组实例
2019/07/04 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
adidas美国官网:adidas US
2016/09/21 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
社会学专业求职信
2014/02/24 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
vue选项卡切换的实现案例
2022/04/11 Vue.js