PHP および AJAX テクノロジーを使用して追加、削除、変更、検索機能を実装する方法
- PHPzオリジナル
- 2023-04-18 10:19:00679ブラウズ
近年、Web テクノロジーの急速な発展と普及に伴い、よりダイナミックでインテリジェントなインタラクティブなエクスペリエンスを実現するために、AJAX テクノロジーを採用する Web サイトやアプリケーションがますます増えています。 WEB プログラミングでは、PHP は非常に一般的に使用されるサーバーサイド プログラミング言語です。したがって、PHP と AJAX テクノロジーを組み合わせて追加、削除、変更、クエリ操作を実装することが、多くの WEB 開発者の最初の選択肢となっています。この記事では、PHP と AJAX テクノロジを使用して、追加、削除、変更、確認機能を実装する方法を紹介します。
- PHP の基礎知識
PHP と AJAX テクノロジを導入する前に、PHP の基本的な構文とデータ操作方法を理解する必要があります:
1.1 PHP の基本構文
PHP は動的に解釈されるサーバー側スクリプト言語です。その基本構文形式には次のものが含まれます:
1.PHP コードは で終わります。 。
2. PHP ステートメントはセミコロン「;」で終わります。
3. PHP 変数は、$name など、$ 記号で始まります。
4. PHP でコメントするには 2 つの方法があります: // は単一行コメントの場合、もう 1 つは複数行コメントの場合です。 次に、PHP 構文の例を示します。
<?php
// 这是单行注释
/*
这是多行注释
*/
$name = "Tom"; // 定义一个变量
echo "Hello, ".$name."!"; // 输出变量
?>
1.2 PHP データ操作
PHP は、MySQL、Oracle、SQL Server などのさまざまなデータベースと対話できます。等PHP では主に MySQL データベースが使用され、MySQL データベースとの対話は MySQLi や PDO などの拡張ライブラリを通じて実現されます。 PHP および MySQL データベースの基本操作は次のとおりです:
1. データベースに接続します
$con = mysqli_connect("localhost","username","password","dbname");
2. SQL ステートメントを実行し、結果セット
$sql = "SELECT * FROM Users"; $result = mysqli_query($con,$sql);
3 を返します。結果セット Data
while($row = mysqli_fetch_array($result))
{
echo $row['UserName'];
echo $row['Password'];
echo $row['Email'];
}
4 の結果を読み取ります。データベース接続を閉じます
mysqli_close($con);AJAX を使用して追加、削除、変更、クエリを実装します
- # #この記事では、ユーザー管理システムを例に、AJAX と PHP を使用して次の 4 つの機能を実装する方法を紹介します:
#2.1 ユーザー情報のクエリ
最初にユーザー情報のクエリ機能を実装します。これには、フロントエンド ページとバックエンド PHP スクリプトの 2 つの部分が含まれています。
2.1.1 フロントエンド ページ
HTML と AJAX を使用して、ユーザー情報をクエリするためのフロントエンド ページを実装します。
<!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>
上記のコードでは、次のコードを使用します。 jQuery ライブラリを使用して AJAX リクエストを開始し、query_user.php スクリプトにアクセスし、返された JSON 形式のデータをページにレンダリングします。
2.1.2 バックエンド PHP スクリプト
以下は、query_user.php スクリプトのコードです:
<?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);
?>
コードでは、クエリ結果を JSON 形式で返します。クエリが成功した場合、コード フィールドの値は 0 になり、データ フィールドはクエリ結果の配列になります。それ以外の場合、コード フィールドは -1 になり、メッセージ フィールドはクエリが失敗した場合のプロンプト情報になります。
2.2 新しいユーザーの追加
新しいユーザーの追加機能を実装するときは、ユーザー データを PHP スクリプトに送信する必要があるため、POST メソッドを使用しますが、JavaScript と PHP は
$_POSTパラメータを渡すためのスーパー グローバル変数。
2.2.1 フロントエンド ページ次は、新しいユーザーを追加するためのフロントエンド ページです:
<!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>
上記のコードでは、フォームを定義し、フォームの名前と種類の各入力ボックスと、フォームを送信するためのボタンが予約されています。ボタンのクリック イベントでは、jQuery の
serialize()メソッドを使用してフォーム データを文字列にカプセル化し、PHP スクリプトに送信しました。
2.2.2 バックエンド PHP スクリプト次は、add_user.php スクリプトのコードです:
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
$con = mysqli_connect("localhost","username","password","dbname");
$sql = "INSERT INTO users (username,password,email) VALUES ('$username','$password','$email')";
if(mysqli_query($con,$sql)){
$response = array(
'code'=>0,
'message'=>'添加成功'
);
}else{
$response = array(
'code'=>-1,
'message'=>'添加失败'
);
}
echo json_encode($response);
mysqli_close($con);
}
?>
コードでは、
$_POST を使用します。取得するフロントエンド ページによって渡されたフォーム データは、mysqli 拡張ライブラリを使用して MySQL データベースに挿入されます。
2.3 ユーザー情報の変更ユーザー情報を変更する機能を実装する場合、ユーザー ID に基づいてユーザー情報を照会し、照会された情報をフロントエンド ページに表示する必要があります。情報 フォームを送信して保存します。
2.3.1 フロントエンド ページ
ユーザー情報を変更するためのフロントエンド ページは次のとおりです:
<!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>
上記のコードでは、隠しフィールドを定義します。フォームにユーザー ID を保存し、クエリ パラメーターを通じてユーザー ID 値を取得し、AJAX リクエストを送信してユーザー情報を取得し、その情報をフォームに表示します。フォーム送信イベントでは、ユーザーが変更した情報を AJAX メソッドを通じて更新するために PHP スクリプトに送信します。
2.3.2 バックエンド PHP スクリプト
以下は edit_user.php スクリプトのコードです:
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
$id = $_POST['id'];
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
$con = mysqli_connect("localhost","username","password","dbname");
$sql = "UPDATE users SET username='$username',password='$password',email='$email' WHERE id=$id";
if(mysqli_query($con,$sql)){
$response = array(
'code'=>0,
'message'=>'保存成功'
);
}else{
$response = array(
'code'=>-1,
'message'=>'保存失败'
);
}
echo json_encode($response);
mysqli_close($con);
}
?>
コードでは、引き続き
$ を使用します。取得する_POSTフロントエンドページから渡されたフォームデータとデータベース内のユーザーデータは、mysqli拡張ライブラリを使用して更新されます。
2.4 ユーザー情報の削除ユーザー情報の削除機能を実装する場合、ユーザーIDを基にユーザー情報を削除する必要があります。
2.4.1 フロントエンド ページ
次は、ユーザー情報を削除するためのフロントエンド ページです:
<!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('+users[i].id+');">删除</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>
上記のコードでは、AJAX を使用してすべての情報をリクエストします。データベース内のユーザー情報を取得し、それをテーブルにレンダリングします。テーブルの各行に「削除」ボタンが追加されており、クリックすると現在の行のユーザー情報を削除するAJAXリクエストが送信されます。
2.4.2 バックエンド PHP スクリプト
次は、delete_user.php スクリプトのコードです:
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
$id = $_POST['id'];
$con = mysqli_connect("localhost","username","password","dbname");
$sql = "DELETE FROM users WHERE id=$id";
if(mysqli_query($con,$sql)){
$response = array(
'code'=>0,
'message'=>'删除成功'
);
}else{
$response = array(
'code'=>-1,
'message'=>'删除失败'
);
}
echo json_encode($response);
mysqli_close($con);
}
?>
コードでは、# を通じてフロントエンドを取得します。 ##$_POST
ページによって渡されたユーザー ID、および対応するユーザー データは、mysqli 拡張ライブラリを使用してデータベースから削除されます。- 概要
この記事では、PHP および AJAX テクノロジを使用して追加、削除、変更、およびクエリ関数を実装する方法を紹介し、基本的な PHP 構文の観点から実装について詳しく説明します。 、MySQL データ操作、および AJAX リクエスト送信プロセスを実行し、サポートするフロントエンド ページとバックエンド PHP スクリプトを提供します。この記事の知識を学習して習得すると、開発者が WEB ベースのアプリケーション開発をより効率的に完了するのに役立ちます。
以上がPHP および AJAX テクノロジーを使用して追加、削除、変更、検索機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。