ホームページ >バックエンド開発 >PHPチュートリアル >PHP と jQuery を使用して Ajax アプリケーションを作成する
PHP と jQuery を使用して Ajax アプリケーションを作成する
- WBOYオリジナル
- 2023-05-11 15:21:12664ブラウズ
Web アプリケーションの継続的な開発により、Ajax はページを更新せずにサーバーと通信できる強力なツールになりました。 Ajax を使用すると、Web アプリケーションのパフォーマンスと使いやすさが向上し、ユーザー エクスペリエンスが向上します。
この記事では、PHP と jQuery を使用して Ajax アプリケーションを作成する方法を紹介します。ユーザーがキーワードを入力し、Ajax テクノロジーを使用してサーバーに送信できる簡単なクエリ ページを作成します。サーバーはデータベースを検索し、関連する結果を返します。その結果は、リロードせずに Web ページ上に動的に表示されます。
始める前に、PHP と jQuery がインストールされていることを確認してください。PHP を使用してクエリ リクエストを処理し、jQuery を使用して Ajax リクエストを送信し、返された結果を処理します。
ステップ 1: HTML ファイルを作成する
まず、クエリ ページとして HTML ファイルを作成する必要があります。以下は、テキスト ボックスとボタンを含む基本的な HTML ファイル テンプレートです。
<!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>ステップ 2: PHP ファイルを作成する
次に、クエリ リクエストを処理するための PHP ファイルを作成する必要があります。以下は、クエリ リクエストを処理するサンプル コードです。
<?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);
?>このコードは、キーワードを含む製品をクエリし、結果を JSON 形式に変換します。次に、jQuery を使用して Ajax リクエストを送信し、返された結果を処理します。
ステップ 3: Ajax コードを作成する
ここで、上記のコードを結合して完全な Ajax アプリケーションを作成できます。 jQuery コードは次のとおりです。
$(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 );
}
});
});
});このコードには、ユーザーが検索ボタンをクリックし、Ajax を使用してリクエストを送信したときにキーワードを取得するクリック イベントが含まれています。リクエストは search.php ファイルに送信され、データベースにクエリが実行され、結果が JSON 形式で返されます。結果が正常に受信されたら、jQuery を使用して結果の HTML を動的に作成し、ページに表示します。
私たちは定期的に jQuery の $.ajax メソッドを使用して非同期リクエストを処理します。これにより、高度な制御が可能になり、あらゆる種類のデータを非常に簡単な方法で処理できるようになります。
ここで注目すべきは、jQuery における ajax の成功コールバック関数とエラーコールバック関数です。成功はコールバックの成功を表し、エラーは例外コールバックを表します。したがって、サーバーがデータを正常に返すと、データは成功コールバック関数に渡され、ビジネス ロジック コードが返されたデータを処理します。リクエストで例外が発生した場合 (たとえば、サーバーが総当たり攻撃を受けて 403 ステータス コードを返した場合)、コードはエラー コールバック関数から例外を受け取り、ユーザーへの例外情報の表示などの関連処理を実行します。
ステップ 4: アプリケーションをテストする
これで、アプリケーションをテストできます。 HTMLファイルを開き、キーワードを入力して検索ボタンをクリックしてください。リロードしなくても、関連する結果がページ上に動的に表示されるはずです。
問題が発生した場合は、コンソール ログでエラー メッセージを確認したり、PHP コードを表示して正しく動作していることを確認したりできます。
結論
PHP と jQuery を使用すると、強力な Ajax アプリケーションを簡単に作成できます。 Ajax により、Web アプリケーションがより高速になり、応答性が向上し、ユーザー エクスペリエンスが向上します。 PHP と jQuery を利用して独自の Ajax アプリケーションを作成し、Web アプリケーションのパフォーマンスと使いやすさを向上できるようになりました。
以上がPHP と jQuery を使用して Ajax アプリケーションを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。