Exemple d'appel Ajax simple jQuery-js tutoriel-php.cn

Exemple d'appel Ajax simple jQuery

巴扎黑

Libérer： 2017-06-30 14:18:59

original

1191 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

Code backend :

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

Copier après la connexion

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>

Copier après la connexion

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!