Maison > interface Web > js tutoriel > Méthode Ajax pour ajouter des pages Web à div

Méthode Ajax pour ajouter des pages Web à div

angryTom
Libérer: 2019-12-14 17:23:06
avant
2626 Les gens l'ont consulté

Méthode Ajax pour ajouter des pages Web à div

Méthode Ajax pour ajouter la page Web au div

1 : utilisez DOM pour obtenir l'ID du div, puis effacez le contenu du DIV ( Si vous devez ajouter le contenu à l'intérieur, ne l'effacez pas) ; il est à noter qu'il est préférable d'utiliser "empty()" pour l'effacer

2 : Définir async ; à vrai, sinon il y aura une autre erreur d'avertissement, cette L'erreur empêche l'affichage de votre contenu ; voici l'erreur d'avertissement

[Recommandations de cours associées : Tutoriel vidéo JavaScript]

Méthode Ajax pour ajouter des pages Web à div

3 : Ajoutez simplement du HTML.

Le code spécifique est le suivant :

<!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>
Copier après la connexion

Enfin, résumons la méthode d'effacement du contenu de DIv

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

Par le façon, donnons le reste aussi :

wrapper

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

insert externe

after()           在后面插      语法:  $(“选择器”).after(“<元素名称>”)
insertAfter()      在后面插      语法:  $(“选择器”).insertAfter(“<元素名称>”)
before           在后面插      语法:  $(“选择器”).before(“<元素名称>”)
insertBefore()     在后面插      语法:  $(“选择器”).insertBefore(“<元素名称>”)
Copier après la connexion

insert interne(in)

append()         在后面插       语法:  $(“选择器”).append(“<元素名称>”)
appendTo()       在后面插       语法:  $(“<元素名称>”).appendTo(“选择器”)
prepend()        在前面插       语法:  $(“选择器”).prepend(“<元素名称>”)  
prependTo()      在前面插       语法:  $(“<元素名称>”).prependTo(“选择器”)
Copier après la connexion

remplacer

replaceWith() 语法 $(“选择器”).replaceWith($(“选择器”))
replaceAll    语法 $(“<元素名称>”).replaceAll    (““选择器”
Copier après la connexion

clone 

clone()
Copier après la connexion

Grammaire :

1、$(“选择器”).clone().append(“元素名”)
2、$(“选择器”).append($(“元素名”).clone())
Copier après la connexion

Au fait, il y a un autre point (bien sûr je l'ai rencontré dans MVC, je n'en suis pas sûr), c'est-à-dire qu'il y a est JS interne dans la page Web obtenue, telle que <script> Voici une fonction pour obtenir l'heure locale </script> Ensuite, lorsque vous exécutez AJAX, la page ne sera pas ajoutée au DIV, et la page entière. sera l'heure actuelle (mais l'adresse ne changera pas). Solution : vous pouvez supprimer le JS ou remplacer le JS par un JS externe.

Cet article provient de la rubrique tutoriel js, bienvenue pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:cnblogs.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal