Maison >interface Web >js tutoriel >Exemple d'appel Ajax simple jQuery

Exemple d'appel Ajax simple jQuery

巴扎黑original: 2017-06-30 14:18:591193parcourir

jQuery est vraiment pratique. Faisons un simple appel Ajax :

Créez un simple fichier html :

<!DOCTYPE HTML><html><head><script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script><script type="text/javascript">
    $(function(){        //按钮单击时执行        $("#testAjax").click(function(){              //取Ajax返回结果
              //为了简单，这里简单地从文件中读取内容作为返回数据              htmlobj=$.ajax({url:"/Readme.txt",async:false});               //显示Ajax返回结果               $("#myp").html(htmlobj.responseText);
         });
    });</script>    </head>
    <body>
        <p id="myp"><h2>通过 AJAX 改变文本</h2></p>
        <button id="testAjax" type="button">Ajax改变内容</button>
    </body></html>

D'accord, cliquez sur le bouton pour voir l'effet.

Bien sûr, l'appel Ajax de jQuery peut contrôler de nombreux éléments, et un appel simple est démontré ici.

Faites attention à votre propre chemin jqueryréférence.

D'accord, faisons un exemple d'appel du backend :

<!DOCTYPE HTML><html><head><script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script><script type="text/javascript">
    $(function(){        //按钮单击时执行        $("#testAjax").click(function(){              
              //Ajax调用处理
            var html = $.ajax({
               type: "POST",
               url: "test.php",
               data: "name=garfield&age=18",
               async: false

            }).responseText;
            $("#myp").html('<h2>'+html+'</h2>');
         });
    });</script>    </head>
    <body>
        <p id="myp"><h2>通过 AJAX 改变文本</h2></p>
        <button id="testAjax" type="button">Ajax改变内容</button>
    </body></html>

Code backend :

<?php    $msg='Hello,'.$_POST['name'].',your age is '.$_POST['age'].'!';    echo $msg;

Vous pouvez désormais obtenir des données en arrière-plan !

Bien sûr, nous pouvons également appeler Ajax comme ceci :

<!DOCTYPE HTML><html><head><script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script><script type="text/javascript">
    $(function(){        //按钮单击时执行        $("#testAjax").click(function(){              
              //Ajax调用处理            $.ajax({
               type: "POST",
               url: "test.php",
               data: "name=garfield&age=18",
               success: function(data){
                        $("#myp").html('<h2>'+data+'</h2>');
                  }
            });
            
         });
    });</script>    </head>
    <body>
        <p id="myp"><h2>通过 AJAX 改变文本</h2></p>
        <button id="testAjax" type="button">Ajax改变内容</button>
    </body></html>

Notez que le paramètre data dans

success: function(data)

peut être remplacé par un autre name , tel que success: function(msg), msg(data) sont les données renvoyées. Il s'agit du paramètre de la fonction de rappel , pas du paramètre data dans l'appel Ajax dans

data : "name=garfield&age=18"

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!

Déclaration：

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

Article précédent：Une introduction détaillée à la relation entre jquery et ajaxArticle suivant：Une introduction détaillée à la relation entre jquery et ajax

Articles Liés

Voir plus