Heim > Artikel > Backend-Entwicklung > Erstellen Sie Ajax-Anwendungen mit PHP und jQuery

Erstellen Sie Ajax-Anwendungen mit PHP und jQuery

WBOYOriginal: 2023-05-11 15:21:12611Durchsuche

Mit der kontinuierlichen Weiterentwicklung von Webanwendungen ist Ajax zu einem leistungsstarken Tool für die Kommunikation mit dem Server ohne Seitenaktualisierung geworden. Mit Ajax können Sie die Leistung und Benutzerfreundlichkeit von Webanwendungen verbessern und das Benutzererlebnis verbessern.

In diesem Artikel erfahren Sie, wie Sie Ajax-Anwendungen mit PHP und jQuery erstellen. Wir erstellen eine einfache Abfrageseite, auf der Benutzer Schlüsselwörter eingeben und diese mithilfe der Ajax-Technologie an den Server senden können. Der Server durchsucht die Datenbank und gibt relevante Ergebnisse zurück, die ohne Neuladen dynamisch auf der Webseite angezeigt werden.

Bevor Sie beginnen, stellen Sie bitte sicher, dass Sie PHP und jQuery installiert haben. Wir verwenden PHP zur Bearbeitung von Abfrageanfragen und jQuery zum Senden von Ajax-Anfragen und zur Verarbeitung zurückgegebener Ergebnisse.

Schritt 1: HTML-Datei erstellen

Zuerst müssen wir eine HTML-Datei als unsere Abfrageseite erstellen. Nachfolgend finden Sie eine einfache HTML-Dateivorlage, die ein Textfeld und eine Schaltfläche enthält.

<!DOCTYPE html>
<html>
<head>
  <title>Ajax Search</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    //Ajax代码将放在这里
  </script>
</head>
<body>
  <h1>Ajax Search</h1>
  <input type="text" id="keyword" name="keyword" placeholder="Enter Keyword">
  <button id="search">Search</button>

  <div id="results">
    <!-- 结果将在这里动态显示 -->
  </div>

</body>
</html>

Schritt 2: PHP-Datei erstellen

Als nächstes müssen wir eine PHP-Datei erstellen, um Abfrageanfragen zu verarbeiten. Hier ist ein Beispielcode, der eine Abfrageanfrage verarbeitet:

<?php
//连接到数据库
$db = mysqli_connect('localhost', 'username', 'password', 'database_name');

//检查连接是否成功
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  exit();
}

//从查询字符串中获取关键字
$keyword = $_GET['keyword'];

//构建查询
$sql = "SELECT * FROM products WHERE name LIKE '%".$keyword."%'";
$result = mysqli_query($db, $sql);

//检查查询是否成功
if (!$result) {
  echo 'Could not run query: ' . mysqli_error($db);
  exit();
}

//将结果转换为JSON格式并输出
$rows = array();
while($row = mysqli_fetch_assoc($result)) {
    $rows[] = $row;
}
echo json_encode($rows);

//关闭连接
mysqli_close($db);
?>

Dieser Code fragt nach Produkten ab, die Schlüsselwörter enthalten, und konvertiert die Ergebnisse in das JSON-Format. Als Nächstes verwenden wir jQuery, um Ajax-Anfragen zu senden und die zurückgegebenen Ergebnisse zu verarbeiten.

Schritt drei: Ajax-Code schreiben

Jetzt können wir den obigen Code kombinieren, um eine vollständige Ajax-Anwendung zu erstellen. Hier ist unser jQuery-Code:

$(document).ready(function() {
    $('#search').click(function() {
        var keyword = $('#keyword').val();
    
        // 发送Ajax请求
        $.ajax({
            url: 'search.php',
            dataType: 'json',
            data: {
                keyword: keyword
            },
            success: function(data) {
                // 处理返回的结果
                var results = '';
                $.each(data, function(index, value) {
                    results += '<div>';
                    results += '<h3>' + value['name'] + '</h3>';
                    results += '<p>' + value['description'] + '</p>';
                    results += '<p>Price: ' + value['price'] + '</p>';
                    results += '</div>';
                });
    
                $('#results').html(results);
            },
            error: function(jqxhr, textStatus, error) {
                // 处理错误
                var err = textStatus + ", " + error;
                console.log( "Request Failed: " + err );
            }
        });
    });
});

Dieser Code enthält ein Klickereignis, das das Schlüsselwort abruft, wenn der Benutzer auf die Suchschaltfläche klickt und eine Anfrage über Ajax sendet. Die Anfrage wird an die Datei search.php gesendet, die die Datenbank abfragt und die Ergebnisse im JSON-Format zurückgibt. Sobald das Ergebnis erfolgreich empfangen wurde, verwenden wir jQuery, um dynamisch den HTML-Code des Ergebnisses zu erstellen und ihn auf der Seite anzuzeigen.

Wir verwenden regelmäßig die $.ajax-Methode von jQuery, um asynchrone Anfragen zu verarbeiten, was Ihnen viel erweiterte Kontrolle bietet und es Ihnen ermöglicht, alle Arten von Daten auf sehr einfache Weise zu verarbeiten.

Worauf Sie hier achten sollten, sind die Erfolgs- und Fehlerrückruffunktionen von Ajax in jQuery. Erfolg stellt einen erfolgreichen Rückruf dar, und Fehler stellt einen Ausnahmerückruf dar. Wenn der Server also Daten erfolgreich zurückgibt, werden die Daten an die Erfolgsrückruffunktion übergeben, und dann verarbeitet unser Geschäftslogikcode die zurückgegebenen Daten. Wenn in der Anfrage eine Ausnahme auftritt, beispielsweise wenn der Server Brute-Force durchführt und den Statuscode 403 zurückgibt, empfängt unser Code die Ausnahme von der Fehlerrückruffunktion und führt die entsprechende Verarbeitung aus, z. B. die Anzeige von Ausnahmeinformationen für den Benutzer.

Schritt vier: Testen Sie die Anwendung

Jetzt können wir unsere Anwendung testen. Öffnen Sie die HTML-Datei, geben Sie ein Schlüsselwort ein und klicken Sie auf die Suchschaltfläche. Sie sollten sehen, dass relevante Ergebnisse dynamisch auf der Seite angezeigt werden, ohne dass die Seite neu geladen werden muss.

Wenn Sie auf Probleme stoßen, können Sie das Konsolenprotokoll auf Fehlermeldungen überprüfen oder den PHP-Code anzeigen, um sicherzustellen, dass er ordnungsgemäß funktioniert.

Fazit

Mit PHP und jQuery können wir ganz einfach leistungsstarke Ajax-Anwendungen erstellen. Ajax macht Webanwendungen schneller und reaktionsfähiger, was die Benutzererfahrung verbessert. Jetzt können Sie Ihre eigenen Ajax-Anwendungen mit PHP und jQuery erstellen und die Leistung und Benutzerfreundlichkeit Ihrer Webanwendungen verbessern.

Das obige ist der detaillierte Inhalt vonErstellen Sie Ajax-Anwendungen mit PHP und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php json jquery ajax html Error 回调函数事件异步数据库

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：Roboterautomatisierung und automatisierte Testtechnologie in PHPNächster Artikel：Roboterautomatisierung und automatisierte Testtechnologie in PHP

In Verbindung stehende Artikel

Mehr sehen