suchen

Heim  >  Artikel  >  Backend-Entwicklung  >  Codebeispiel zur einfachen Implementierung der asynchronen Seitenaktualisierung über PHP+JQuery+Ajax

Codebeispiel zur einfachen Implementierung der asynchronen Seitenaktualisierung über PHP+JQuery+Ajax

jacklove
jackloveOriginal
2018-06-15 14:34:311519Durchsuche

Die Seite wird wie folgt angezeigt:

Der Code in JQueryAjax.html lautet wie folgt (unter Verwendung des einfacheren $.post) 


<html>
<head>
<meta charset="UTF-8">
<title>JQueryAjax+PHP</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
    用户名:<input type="text" id="username" name="username" /><br>
    密码:<input type="password" id="password" name="password" /><br>
    <button type="button" class="butn">ajax提交</button><br>
    <span class="con"></span>
<script type="text/javascript">
$(document).ready(function(){
    $(".butn").click(function(){
        var username = $("#username").val();
        var password = $("#password").val();
        $.post(&#39;ajax.php&#39;,{name:username,pwd:password},function(data) {
            alert(data);
            $(".con").html(data);
        })
    })
})
</script>
</body>
</html>

ajax.php：

ajax.php
<?php 
echo &#39;用户名:&#39;,$_POST[&#39;name&#39;],&#39;,密码：&#39;,$_POST[&#39;pwd&#39;]."<br>";
//这里可以进行一些操作，比如数据库交互


echo "操作完毕";
?>

Im Nicht-JSON-Format kann der Hintergrund nur Zeichenfolgen zurückgeben. Wenn Sie ein Array im Hintergrund zurückgeben möchten, können Sie das JSON-Format verwenden >

Ändern Sie beispielsweise den Code wie folgt: 

<html>
<head>
<meta charset="UTF-8">
<title>JQueryAjax+PHP</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
    用户名:<input type="text" id="username" name="username" /><br>
    密码:<input type="password" id="password" name="password" /><br>
    <button type="button" class="butn">ajax提交</button><br>
    <span class="con"></span>
<script type="text/javascript">
$(document).ready(function(){
    $(".butn").click(function(){
        var username = $("#username").val();
        var password = $("#password").val();
        $.ajax({
             url: "ajax.php",  
             type: "POST",
             data:{name:username,pwd:password},
             dataType: "json",
             error: function(){  
                 alert(&#39;Error loading XML document&#39;);  
             },  
             success: function(data,status){//如果调用php成功 
                alert(status);
                alert(data);
                $(&#39;.con&#39;).html("用户名:"+data[0]+"密码:"+data[1]);
             }
        });
    })
})
</script>
</body>
</html>

ajax.php

<?php 
$name = $_POST[&#39;name&#39;];
$pwd = $_POST[&#39;pwd&#39;];
$array = array("$name","$pwd");
//这里进行一个些操作，比如数据库交互

echo json_encode($array);//json_encode方式是必须的
?>

Der laufende Effekt ist wie folgt:


In diesem Artikel wird erläutert, wie PHP + JQuery + Ajax einfach das Codebeispiel der asynchronen Seitenaktualisierung implementiert. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

thinkphp+redis+-Warteschlangenprobleme

Erstellen Sie eine Lampe auf dem Server (Linux (CentOS7) + Apache+ MySQL +PHP)

Erklärung einfacher Beispiele der Android+PHP+MYSQL-Entwicklung

Das obige ist der detaillierte Inhalt vonCodebeispiel zur einfachen Implementierung der asynchronen Seitenaktualisierung über PHP+JQuery+Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php mysql json jquery ajax html thinkphp 字符串 异步 redis android apache linux
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：Nutzungsanalyse der Zend_Registry-Komponente im Zend FrameworkNächster Artikel：Nutzungsanalyse der Zend_Registry-Komponente im Zend Framework

In Verbindung stehende Artikel

Mehr sehen