使用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的最佳方法分享
Oct 21 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
Django 静态文件配置过程详解
2019/07/23 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
大课间体育活动方案
2014/03/12 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
我的中国梦口号
2014/06/16 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
小石潭记导游词
2015/02/03 职场文书
团委副书记工作总结
2015/08/14 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
win10下go mod配置方式
2021/04/25 Golang
Python 数据可视化之Seaborn详解
2021/11/02 Python