div에 웹 페이지를 추가하는 Ajax 메소드-JS 튜토리얼-php.cn

div에 웹 페이지를 추가하는 Ajax 메소드

angryTom

풀어 주다： 2019-12-14 17:23:06

앞으로

2623명이 탐색했습니다.

div에 웹 페이지를 추가하는 Ajax 메소드

웹페이지를 가져와서 div에 추가하는 Ajax 메서드

1: DOM을 사용하여 div의 ID를 가져온 다음 DIV의 콘텐츠를 지웁니다(필요한 경우 지우지 마세요). 내용을 내부에 추가하세요. 비우려면 "empty()"를 사용하는 것이 가장 좋습니다.

2: async를 true로 설정하세요. 그렇지 않으면 이 오류로 인해 콘텐츠가 표시되지 않습니다. 다음은 경고 오류입니다

[관련 강좌 추천 :JavaScript 비디오 튜토리얼]

div에 웹 페이지를 추가하는 Ajax 메소드

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:&#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>

로그인 후 복사

마지막으로 DIv의 내용을 지우는 방법을 정리하겠습니다

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

로그인 후 복사

그런데 나머지는

Package

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

로그인 후 복사

외부 삽입

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

로그인 후 복사

내부 삽입(in)

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 tutorial 칼럼에서 가져온 것입니다. 배우신 것을 환영합니다!

위 내용은 div에 웹 페이지를 추가하는 Ajax 메소드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!