Heim > Artikel > Web-Frontend > Beispiel für einen einfachen Ajax-Aufruf von jQuery

Beispiel für einen einfachen Ajax-Aufruf von jQuery

巴扎黑Original: 2017-06-30 14:18:591112Durchsuche

jQuery ist wirklich praktisch. Machen wir einen einfachen Ajax-Aufruf:

Erstellen Sie eine einfache HTML-Datei:

<!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>

Okay, klicken Sie auf die Schaltfläche, um den Effekt zu sehen.

Natürlich kann der Ajax-Aufruf von jQuery viele Elemente steuern, und ein einfacher Aufruf wird hier demonstriert.

Achten Sie auf Ihren eigenen JQueryReferenzPfad.

Okay, machen wir ein Beispiel für den Aufruf des Backends:

<!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>

Backend-Code:

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

Jetzt können Sie Daten aus dem Hintergrund abrufen!

Natürlich können wir Ajax auch so aufrufen:

<!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>

Beachten Sie, dass der Datenparameter in

success: function(data)

in einen anderen geändert werden kann Name, wie zum Beispiel success: function(msg), msg(data) sind die zurückgegebenen Daten. Dies ist der Parameter der Callback--Funktion, nicht der Datenparameter im Ajax-Aufruf in

data: "name=garfield&age=18"

Das obige ist der detaillierte Inhalt vonBeispiel für einen einfachen Ajax-Aufruf von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine detaillierte Einführung in die Beziehung zwischen Jquery und AjaxNächster Artikel：Eine detaillierte Einführung in die Beziehung zwischen Jquery und Ajax

In Verbindung stehende Artikel

Mehr sehen