PHP と jQuery を使用して Ajax アプリケーションを作成する-PHPチュートリアル-php.cn

PHP と jQuery を使用して Ajax アプリケーションを作成する

WBOY

リリース： 2023-05-11 15:24:01

オリジナル

600 人が閲覧しました

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 サイトの他の関連記事を参照してください。