使用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 相关文章推荐
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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
JS 网站性能优化笔记
2011/05/24 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
JS 自动安装exe程序
2008/11/30 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
js的2种继承方式详解
2014/03/04 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
javascript正则表达式总结
2016/02/29 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
python pdb调试方法分享
2014/01/21 Python
Python中的localtime()方法使用详解
2015/05/22 Python
python开发中range()函数用法实例分析
2015/11/12 Python
python模拟事件触发机制详解
2018/01/19 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python3中for循环踩过的坑记录
2020/12/14 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
大学生个人学年总结
2015/02/15 职场文书