juqery $.ajax 请求另一个html页面的指定的一部分加载到本页面div，重点是一部分数据加载到本页面div

发布网友发布时间：2022-04-07 08:55

我来回答

共6个回答

懂视网时间：2022-04-07 13:17

ajax获取网页添加到div中的方法

1：利用DOM获取该 div 的 ID，然后清空该DIV的内容（如果你需要接着里面的内容添加可不要清空）；需要注意点是清空最好用“ empty() ”；

2: 把 async设成true ,否则又一条警告的错误，这条错误导致你的内容显示不出来；下面就是警告的错误

【相关课程推荐：JavaScript视频教程】

3:就是添加HTML了。

具体代码如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>测试</title>
</head>
<body>
 <div id="tset">
 <a href="http://www.baidu.com">百度</a>
 </div>
 <button id="btn">测试</button>
</body>
<script src="../../Js/jquery-3.4.1.js">
 
</script><script src="../../Js/layer-v3.1.1/layer/layer.js"></script>
<script>
 $(function(){
 $("#btn").click(function(){
  $.ajax({
  url:'../../Html/JQueryDome/弹框.html',
  dataType:'html',
  type:'get',
  async:true,
  success:function(data){
   console.log(data);
   $("#tset").html(data)
  },error:function(){
 
  }
  })
 })
 })
</script>
</html>

最后总结一下清空DIv的内容的方法

empty() 情况选择器里面的内容 
语法 $(“选择器”).empty() 
remove() 删除后再恢复事件不在
语法 $(“选择器”).remove()
detach() 删除后再恢复事件在
语法 $(“选择器”).detach()

顺便把其余的也给出来吧：

包裹

wrap() 每一个外面都添加一个新的元素
语法 $(“选择器”).wrap(“<元素名称>”)
wrapAll() 同一包裹一个元素
语法 $(“选择器”).wrap(“<元素名称>”)
wrapInner() 在里面添加一个新的元素
语法 $(“选择器”).wrap(“<元素名称>”)
unwrap() 去掉包裹
语法 $(“选择器”).wrap(“<元素名称>”)

外部插入

after()  在后面插 语法： $(“选择器”).after(“<元素名称>”)
insertAfter() 在后面插 语法： $(“选择器”).insertAfter(“<元素名称>”)
before  在后面插 语法： $(“选择器”).before(“<元素名称>”)
insertBefore() 在后面插 语法： $(“选择器”).insertBefore(“<元素名称>”)

内部插入(在)

append()  在后面插 语法： $(“选择器”).append(“<元素名称>”)
appendTo() 在后面插 语法： $(“<元素名称>”).appendTo(“选择器”)
prepend() 在前面插 语法： $(“选择器”).prepend(“<元素名称>”) 
prependTo() 在前面插 语法： $(“<元素名称>”).prependTo(“选择器”)

替换

replaceWith() 语法 $(“选择器”).replaceWith($(“选择器”))
replaceAll 语法 $(“<元素名称>”).replaceAll (““选择器”

克隆

clone()

语法：

1、$(“选择器”).clone().append(“元素名”)
2、$(“选择器”).append($(“元素名”).clone())

对了，还有一点就是（当然我是MVC中遇到的，不确定都有哟），就是在获取的网页中有内部JS，比如<script>这里是一个获取本地的时间函数</script>，然后当你执行AJAX时，页面不会添加到DIV中，整个页面就是是当前时间（但是地址没有变化）。解决办法：可以把该JS删除，或者该JS换成一个外部JS即可。

本文来自 js教程栏目，欢迎学习！

热心网友时间：2022-04-07 10:25

$.ajax( {

url: url, //这里是静态页的地址

type: "GET", //静态页用get方法，否则服务器会抛出405错误

success: function(data){

var result = $(data).find("另一个html页面的指定的一部分");

$("本页面div").html(result);

}

});

扩展资料：

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。

type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。

如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。

设置为false将不会从浏览器缓存中加载请求信息。

热心网友时间：2022-04-07 11:43

那个请求页把指定部分输出到页面并返回这部分数据，加载到本页面的div,innerHTML中

热心网友时间：2022-04-07 13:17

$.ajax( {
url: url, //这里是静态页的地址
type: "GET", //静态页用get方法，否则服务器会抛出405错误
success: function(data){
var result = $(data).find("另一个html页面的指定的一部分");
$("本页面div").html(result);

}
});

大概思路，琢磨下。追问很感谢，我也用的这种思路！

热心网友时间：2022-04-07 15:09

$.post("Callback.ashx",{参数},function(data){
//回调函数
data为返回的值,可以是HTML,也可以是text,也可以是json格式的字符串

})

热心网友时间：2022-04-07 17:17

0000000000000000000000000000000000000000000000000000000000000000

juqery $.ajax 请求另一个html页面的指定的一部分 加载到本页面div，重点是一部分数据加载到本页面div

扩展资料：

juqery $.ajax 请求另一个html页面的指定的一部分加载到本页面div，重点是一部分数据加载到本页面div