使用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 相关文章推荐
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
js css自定义分页效果
Feb 24 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
微信小程序实现菜单左右联动
May 19 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
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
php INI配置文件的解析实现分析
2011/01/04 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
python中requests模块的使用方法
2015/04/08 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
工艺工程师工作职责
2013/11/23 职场文书
书法培训心得体会
2014/01/05 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
医德医风演讲稿
2014/05/20 职场文书
运动会开幕式主持词
2015/07/01 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
创业计划书之美容店
2019/09/16 职场文书