Ajax method to get web pages added to div-JS Tutorial-php.cn

Ajax method to get web pages added to div

angryTom

Release： 2019-12-14 17:23:06

forward

2626 people have browsed it

Ajax method to get web pages added to div

Ajax method to get the web page added to the div

1: Use DOM to get the ID of the div, and then clear the content of the DIV ( If you need to add the content inside, do not clear it); it should be noted that it is best to use "empty()" to clear it;

2: Set async to true, otherwise there will be another warning error, this The error prevents your content from being displayed; the following is the warning error

[Related course recommendations: JavaScript video tutorial]

Ajax method to get web pages added to div

3: Just add HTML.

The specific code is as follows:

<!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:&#39;../../Html/JQueryDome/弹框.html&#39;,
                dataType:&#39;html&#39;,
                type:&#39;get&#39;,
                async:true,
                success:function(data){
                    console.log(data);
                   $("#tset").html(data)
                },error:function(){
 
                }
            })
        })
    })
</script>
</html>

Copy after login

Finally, let’s summarize the method of clearing the contents of Div

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

Copy after login

By the way, let’s give the rest as well. :

Package

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

Copy after login

External insert

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

Copy after login

Internal insert(in)

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

Copy after login

Replace

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

Copy after login

Clone

clone()

Copy after login

Grammar:

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

Copy after login

By the way, another point is (of course I encountered it in MVC, I’m not sure if there are any), that is, there is internal JS in the obtained web page, such as <script> Here is a function to get the local time </script>. Then when you execute AJAX, the page will not be added to the DIV, and the entire page will be the current time (but the address will not change). Solution: You can delete the JS, or replace the JS with an external JS.

This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of Ajax method to get web pages added to div. For more information, please follow other related articles on the PHP Chinese website!