Heim  >  Artikel  >  Backend-Entwicklung  >  Verwendung der PHP- und AJAX-Technologie zur Implementierung von Hinzufügungs-, Lösch-, Änderungs- und Suchfunktionen

Verwendung der PHP- und AJAX-Technologie zur Implementierung von Hinzufügungs-, Lösch-, Änderungs- und Suchfunktionen

PHPz
PHPzOriginal
2023-04-18 10:19:00679Durchsuche

In den letzten Jahren haben mit der rasanten Entwicklung und Popularisierung der Web-Technologie immer mehr Websites und Anwendungen die AJAX-Technologie übernommen, um ein dynamischeres und intelligenteres interaktives Erlebnis zu erzielen. In der WEB-Programmierung ist PHP eine sehr häufig verwendete serverseitige Programmiersprache. Daher ist die Kombination von PHP- und AJAX-Technologie zur Implementierung von Hinzufügungs-, Lösch-, Änderungs- und Abfragevorgängen für viele WEB-Entwickler zur ersten Wahl geworden. In diesem Artikel wird erläutert, wie Sie mithilfe der PHP- und AJAX-Technologie die Funktionen zum Hinzufügen, Löschen, Ändern und Überprüfen implementieren.

  1. PHP-Grundkenntnisse

Bevor wir die PHP- und AJAX-Technologie einführen, müssen wir einige grundlegende PHP-Syntax- und Datenmanipulationsmethoden verstehen:# 🎜🎜 #

1.1 Grundlegende PHP-Syntax

PHP ist eine dynamische, interpretierte serverseitige Skriptsprache. Ihr grundlegendes Syntaxformat umfasst:

1 , PHP-Code beginnt mit < ;?php und endet mit ?>.

2. Die PHP-Anweisung endet mit einem Semikolon „;“.

3. PHP-Variablen beginnen mit einem $-Symbol, z. B. $name.

4. Es gibt zwei Möglichkeiten zum Kommentieren in PHP: // für einzeilige Kommentare und /

.../ für mehrzeilige Kommentare.

Das Folgende ist ein Beispiel für die PHP-Syntax:

<?php
   // 这是单行注释
   /*
     这是多行注释
   */
   $name = "Tom"; // 定义一个变量
   echo "Hello, ".$name."!"; // 输出变量
?>
1.2 PHP-Datenoperation

PHP kann mit einer Vielzahl von Datenbanken wie MySQL interagieren , Oracle, SQL Server usw. In PHP wird hauptsächlich die MySQL-Datenbank verwendet und die Interaktion mit der MySQL-Datenbank wird durch Erweiterungsbibliotheken wie MySQLi oder PDO erreicht. Im Folgenden sind die grundlegenden Operationen der PHP- und MySQL-Datenbank aufgeführt:

1 Stellen Sie eine Verbindung zur Datenbank her

$con = mysqli_connect("localhost","username","password","dbname");
2. Führen Sie SQL-Anweisungen aus und geben Sie die Ergebnismenge zurück

$sql = "SELECT * FROM Users";
$result = mysqli_query($con,$sql);
3, lesen Sie die Daten im Ergebnissatz

while($row = mysqli_fetch_array($result))
{
    echo $row['UserName'];
    echo $row['Password'];
    echo $row['Email'];
}
4, schließen Sie die Datenbankverbindung

mysqli_close($con);
    Verwenden Sie AJAX, um das Hinzufügen, Löschen und Ändern zu implementieren und Abfrage
  1. #🎜 🎜#In diesem Artikel nehmen wir das Benutzerverwaltungssystem als Beispiel, um vorzustellen, wie AJAX und PHP verwendet werden, um die folgenden vier Funktionen zu implementieren:
#🎜🎜 #1. Benutzerinformationen abfragen

2. Neuen Benutzer hinzufügen

3, Benutzerinformationen ändern

4, Benutzerinformationen löschen

# 🎜🎜#2.1 Benutzerinformationen abfragen

uns Implementieren wir zunächst die Funktion zum Abfragen von Benutzerinformationen, die aus zwei Teilen besteht: der Front-End-Seite und dem Back-End-PHP-Skript.

2.1.1 Frontend-Seite

Wir verwenden HTML und AJAX, um die Frontend-Seite für die Abfrage von Benutzerinformationen zu implementieren:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>用户管理系统 - 查询</title>
</head>
<body>
    <h1>用户管理系统 - 查询</h1>
    <table border="1" cellpadding="10">
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>密码</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody id="user_table">
        </tbody>
    </table>
    <script>
        $(document).ready(function(){
            $.ajax({
                url:'query_user.php',
                type:'get',
                dataType:'json',
                success:function(data){
                    if(data.code==0){
                        var users = data.data;
                        var tr = '';
                        for(var i=0;i<users.length;i++){
                            tr += '<tr>'
                                +'<td>'+users[i].id+'</td>'
                                +'<td>'+users[i].username+'</td>'
                                +'<td>'+users[i].password+'</td>'
                                +'<td>'+users[i].email+'</td>'
                                +'</tr>';
                        }
                        $('#user_table').append(tr);
                    }
                },
                error:function(){
                    alert('查询失败!');
                }
            });
        });
    </script>
</body>
</html>

In Den obigen Code verwenden wir. Die jQuery-Bibliothek initiiert eine AJAX-Anfrage, greift auf das Skript query_user.php zu und rendert die zurückgegebenen JSON-formatierten Daten auf der Seite.

2.1.2 Back-End-PHP-Skript

Das Folgende ist der Code des query_user.php-Skripts:

<?php
$con = mysqli_connect("localhost","username","password","dbname");
$sql = "SELECT * FROM users";
$result = mysqli_query($con,$sql);
$users = array();
if(mysqli_num_rows($result)>0){
  while($row = mysqli_fetch_assoc($result)){
      $users[] = $row;
  }
  $response = array(
        'code'=>0,
        'message'=>'查询成功',
        'data'=>$users
  );
}else{
  $response = array(
      'code'=>-1,
      'message'=>'查询失败'
  );
}
echo json_encode($response);
mysqli_close($con);
?>

Im Code kehren wir zurück Die Abfrage im JSON-Format. Wenn die Abfrage erfolgreich ist, ist der Wert des Codefelds 0 und das Datenfeld ist das Abfrageergebnisarray. Andernfalls ist das Codefeld -1 und das Nachrichtenfeld die Eingabeaufforderung Informationen zum Abfragefehler.

2.2 Neuen Benutzer hinzufügen

Bei der Implementierung der Funktion „Neuen Benutzer hinzufügen“ müssen wir Benutzerdaten an das PHP-Skript senden, daher verwenden wir die POST-Methode, während JavaScript und PHP Übergeben Sie $_POST Superglobale Variablen zur Parameterübergabe.

2.2.1 Front-End-Seite

Das Folgende ist die Front-End-Seite zum Hinzufügen neuer Benutzer:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>用户管理系统 - 添加</title>
</head>
<body>
    <h1>用户管理系统 - 添加</h1>
    <form id="add_form">
        <label>用户名:</label>
        <input type="text" name="username"><br>
        <label>密码:</label>
        <input type="password" name="password"><br>
        <label>邮箱:</label>
        <input type="email" name="email"><br>
        <input type="submit" value="添加">
    </form>
    <script>
        $(function(){
            $('#add_form').submit(function(event){
                event.preventDefault();
                var data = $(this).serialize();
                $.ajax({
                    url:'add_user.php',
                    type:'post',
                    dataType:'json',
                    data:data,
                    success:function(data){
                        if(data.code==0){
                            alert('添加成功!');
                        }else{
                            alert('添加失败!');
                        }
                    },
                    error:function(){
                        alert('添加失败!');
                    }
                });
            });
        });
    </script>
</body>
</html>

Im obigen Code Wir definieren ein Formular, legen den Namen und den Typ jedes Eingabefelds im Formular fest und reservieren eine Schaltfläche zum Absenden des Formulars. Im Button-Click-Ereignis haben wir die Methode serialize() von jQuery verwendet, um die Formulardaten in einen String zu kapseln und an das PHP-Skript zu übermitteln. $_POST超全局变量进行参数传递。

2.2.1 前端页面

以下为添加新用户的前端页面:

<?php
if($_SERVER[&#39;REQUEST_METHOD&#39;]==&#39;POST&#39;){
    $username = $_POST[&#39;username&#39;];
    $password = $_POST[&#39;password&#39;];
    $email = $_POST[&#39;email&#39;];
    $con = mysqli_connect("localhost","username","password","dbname");
    $sql = "INSERT INTO users (username,password,email) VALUES (&#39;$username&#39;,&#39;$password&#39;,&#39;$email&#39;)";
    if(mysqli_query($con,$sql)){
        $response = array(
            &#39;code&#39;=>0,
            'message'=>'添加成功'
        );
    }else{
        $response = array(
            'code'=>-1,
            'message'=>'添加失败'
        );
    }
    echo json_encode($response);
    mysqli_close($con);
}
?>

以上代码中,我们定义了一个表单,设置了表单中各个输入框的名称和类型,预留了一个按钮用于提交表单。在按钮的点击事件中,我们使用了jQuery的serialize()方法将表单数据封装成字符串提交给PHP脚本。

2.2.2 后端PHP脚本

以下为add_user.php脚本的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>用户管理系统 - 修改</title>
</head>
<body>
    <h1>用户管理系统 - 修改</h1>
    <form id="edit_form">
        <input type="hidden" name="id" value="">
        <label>用户名:</label>
        <input type="text" name="username" value=""><br>
        <label>密码:</label>
        <input type="password" name="password" value=""><br>
        <label>邮箱:</label>
        <input type="email" name="email" value=""><br>
        <input type="submit" value="保存">
    </form>
    <script>
        function queryUser(id){
            $.ajax({
                url:'query_user.php',
                type:'get',
                dataType:'json',
                data:{id:id},
                success:function(data){
                    if(data.code==0){
                        var user = data.data[0];
                        $('input[name="id"]').val(user.id);
                        $('input[name="username"]').val(user.username);
                        $('input[name="password"]').val(user.password);
                        $('input[name="email"]').val(user.email);
                    }else{
                        alert('查询失败!');
                    }
                },
                error:function(){
                    alert('查询失败!');
                }
            });
        }
        $(function(){
            var id = parseInt(location.search.substring(4));
            if(isNaN(id)){
                alert('用户ID错误!');
            }else{
                queryUser(id);
                $('#edit_form').submit(function(event){
                    event.preventDefault();
                    var data = $(this).serialize();
                    $.ajax({
                        url:'edit_user.php',
                        type:'post',
                        dataType:'json',
                        data:data,
                        success:function(data){
                            if(data.code==0){
                                alert('保存成功!');
                            }else{
                                alert('保存失败!');
                            }
                        },
                        error:function(){
                            alert('保存失败!');
                        }
                    });
                });
            }
        });
    </script>
</body>
</html>

代码中,我们使用了$_POST获取前端页面传递的表单数据,并使用mysqli扩展库将数据插入到MySQL数据库中。

2.3 修改用户信息

在实现修改用户信息的功能时,我们需要根据用户ID查询用户信息,并将查询到的信息展示在前端页面中,用户可以修改信息后提交表单进行保存。

2.3.1 前端页面

以下为修改用户信息的前端页面:

<?php
if($_SERVER[&#39;REQUEST_METHOD&#39;]==&#39;POST&#39;){
    $id = $_POST[&#39;id&#39;];
    $username = $_POST[&#39;username&#39;];
    $password = $_POST[&#39;password&#39;];
    $email = $_POST[&#39;email&#39;];
    $con = mysqli_connect("localhost","username","password","dbname");
    $sql = "UPDATE users SET username=&#39;$username&#39;,password=&#39;$password&#39;,email=&#39;$email&#39; WHERE id=$id";
    if(mysqli_query($con,$sql)){
        $response = array(
            &#39;code&#39;=>0,
            'message'=>'保存成功'
        );
    }else{
        $response = array(
            'code'=>-1,
            'message'=>'保存失败'
        );
    }
    echo json_encode($response);
    mysqli_close($con);
}
?>

以上代码中,我们在表单中定义了一个隐藏域用于存储用户ID,通过查询参数的方式获取用户ID值,并发送AJAX请求获取用户信息,将信息展示在表单中。在表单提交事件中,我们将用户修改后的信息通过AJAX方法提交给PHP脚本进行更新。

2.3.2 后端PHP脚本

以下为edit_user.php脚本的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>用户管理系统 - 删除</title>
</head>
<body>
    <h1>用户管理系统 - 删除</h1>
    <table border="1" cellpadding="10">
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>密码</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="user_table">
        </tbody>
    </table>
    <script>
        $(function(){
            $.ajax({
                url:'query_user.php',
                type:'get',
                dataType:'json',
                success:function(data){
                    if(data.code==0){
                        var users = data.data;
                        var tr = '';
                        for(var i=0;i<users.length;i++){
                            tr += '<tr>'
                                +'<td>'+users[i].id+'</td>'
                                +'<td>'+users[i].username+'</td>'
                                +'<td>'+users[i].password+'</td>'
                                +'<td>'+users[i].email+'</td>'
                                +'<td><a href="javascript:void(0);" onclick="deleteUser(&#39;+users[i].id+&#39;);">删除</a></td>'
                                +'</tr>';
                        }
                        $('#user_table').append(tr);
                    }
                },
                error:function(){
                    alert('查询失败!');
                }
            });
        });
        function deleteUser(id){
            if(confirm('确定要删除该用户吗?')){
                $.ajax({
                    url:'delete_user.php',
                    type:'post',
                    dataType:'json',
                    data:{id:id},
                    success:function(data){
                        if(data.code==0){
                            alert('删除成功!');
                            location.reload();
                        }else{
                            alert('删除失败!');
                        }
                    },
                    error:function(){
                        alert('删除失败!');
                    }
                });
            }
        }
    </script>
</body>
</html>

代码中,我们仍然使用$_POST获取前端页面传递的表单数据,并使用mysqli扩展库更新数据库中的用户数据。

2.4 删除用户信息

在实现删除用户信息的功能时,我们需要根据用户ID删除用户信息。

2.4.1 前端页面

以下为删除用户信息的前端页面:

<?php
if($_SERVER[&#39;REQUEST_METHOD&#39;]==&#39;POST&#39;){
    $id = $_POST[&#39;id&#39;];
    $con = mysqli_connect("localhost","username","password","dbname");
    $sql = "DELETE FROM users WHERE id=$id";
    if(mysqli_query($con,$sql)){
        $response = array(
            &#39;code&#39;=>0,
            'message'=>'删除成功'
        );
    }else{
        $response = array(
            'code'=>-1,
            'message'=>'删除失败'
        );
    }
    echo json_encode($response);
    mysqli_close($con);
}
?>

以上代码中,我们使用AJAX请求获取数据库中所有用户信息,并渲染到表格中。在表格的每一行中添加了一个“删除”按钮,点击后发送AJAX请求删除当前行中的用户信息。

2.4.2 后端PHP脚本

以下为delete_user.php脚本的代码:

rrreee

代码中,我们通过$_POST

2.2.2 Back-End-PHP-Skript #🎜🎜##🎜🎜#Das Folgende ist der Code des add_user.php-Skripts: #🎜🎜#rrreee#🎜🎜#Im Code haben wir verwenden $_POST Ruft die von der Front-End-Seite übergebenen Formulardaten ab und verwendet die MySQLi-Erweiterungsbibliothek, um die Daten in die MySQL-Datenbank einzufügen. #🎜🎜##🎜🎜#2.3 Benutzerinformationen ändern #🎜🎜##🎜🎜# Bei der Implementierung der Funktion zum Ändern von Benutzerinformationen müssen wir Benutzerinformationen basierend auf der Benutzer-ID abfragen und die abgefragten Informationen auf der Front-End-Seite anzeigen . Benutzer können die Informationen ändern und das Formular absenden, um es zu speichern. #🎜🎜##🎜🎜#2.3.1 Front-End-Seite #🎜🎜##🎜🎜#Das Folgende ist die Front-End-Seite zum Ändern von Benutzerinformationen: #🎜🎜#rrreee#🎜🎜#Im obigen Code Wir definieren ein im Formular. Das versteckte Feld wird zum Speichern der Benutzer-ID, zum Abrufen des Benutzer-ID-Werts über Abfrageparameter, zum Senden einer AJAX-Anfrage zum Abrufen von Benutzerinformationen und zum Anzeigen der Informationen im Formular verwendet. Beim Formularübermittlungsereignis übermitteln wir die geänderten Informationen des Benutzers zur Aktualisierung über die AJAX-Methode an das PHP-Skript. #🎜🎜##🎜🎜#2.3.2 Back-End-PHP-Skript #🎜🎜##🎜🎜#Das Folgende ist der Code des edit_user.php-Skripts: #🎜🎜#rrreee#🎜🎜#Im Code haben wir noch verwenden $_POST Ruft die von der Front-End-Seite übergebenen Formulardaten ab und verwendet die MySQLi-Erweiterungsbibliothek, um die Benutzerdaten in der Datenbank zu aktualisieren. #🎜🎜##🎜🎜#2.4 Benutzerinformationen löschen #🎜🎜##🎜🎜# Bei der Implementierung der Funktion zum Löschen von Benutzerinformationen müssen wir Benutzerinformationen basierend auf der Benutzer-ID löschen. #🎜🎜##🎜🎜#2.4.1 Front-End-Seite #🎜🎜##🎜🎜#Das Folgende ist die Front-End-Seite zum Löschen von Benutzerinformationen: #🎜🎜#rrreee#🎜🎜#Im obigen Code Wir verwenden AJAX, um alle Benutzerinformationen der Datenbank abzurufen und in einer Tabelle darzustellen. Jeder Zeile der Tabelle wird eine Schaltfläche „Löschen“ hinzugefügt. Wenn Sie darauf klicken, wird eine AJAX-Anfrage gesendet, um die Benutzerinformationen in der aktuellen Zeile zu löschen. #🎜🎜##🎜🎜#2.4.2 Back-End-PHP-Skript #🎜🎜##🎜🎜#Das Folgende ist der Code des delete_user.php-Skripts: #🎜🎜#rrreee#🎜🎜#Im Code übergeben wir $ _POSTRuft die von der Front-End-Seite übergebene Benutzer-ID ab und verwendet die MySQLi-Erweiterungsbibliothek, um die entsprechenden Benutzerdaten aus der Datenbank zu löschen. #🎜🎜#
  1. Zusammenfassung

In diesem Artikel wird die Verwendung der PHP- und AJAX-Technologie zum Implementieren der Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen vorgestellt, beginnend mit der grundlegenden PHP-Syntax und MySQL Datenoperationen, Senden von AJAX-Anfragen usw. Der Implementierungsprozess wird ausführlich erläutert und die unterstützende Front-End-Seite und das Back-End-PHP-Skript werden angegeben. Das Erlernen und Beherrschen des Wissens in diesem Artikel kann Entwicklern dabei helfen, die WEB-basierte Anwendungsentwicklung effizienter abzuschließen.

Das obige ist der detaillierte Inhalt vonVerwendung der PHP- und AJAX-Technologie zur Implementierung von Hinzufügungs-, Lösch-, Änderungs- und Suchfunktionen. 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