php+jQuery+Ajax を使用して同様の効果を実現する方法 (ソースコードのダウンロード付き)、jqueryajax

php+jQuery+Ajax を使用して同様の効果を実現する方法 (ソースコードのダウンロード付き)、jqueryajax_PHP チュートリアル

WBOY

リリース： 2016-07-12 09:01:47

オリジナル

879 人が閲覧しました

php+jQuery+Ajax で同様の効果を実現する方法 (ソースコードのダウンロード付き)、jqueryajax

この記事の例では、同様の効果を実現する php+jQuery+Ajax の方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

データベース設計

最初に 2 つのテーブルを用意します。 pic テーブルには、ユーザーが「いいね！」をクリックした後の、写真に対応する写真の名前、パス、「いいね！」の合計数などの写真情報が保存されます。

リーリー

index.php

index.phpでは、PHPを通じてpic table内の画像情報を読み込んで表示し、CSSと組み合わせてページの表示効果を高めています。

リーリー

CSS では、マウスがハートボタンに近づいたり遠ざかったりする動的な効果を定義し、ボタンを配置します。

リーリー

jQueryコード

ユーザーが気に入った画像の赤いハートボタンをクリックすると、バックグラウンドのlove.phpにAjaxリクエストが送信され、リクエストの応答が成功すると、元の値が更新されます

。リーリー

love.php

バックグラウンドの love.php は、フロントエンドから ajax リクエストを受け取り、送信された画像 ID 値に基づいて IP テーブルを検索し、ユーザーの IP のクリック記録があるかどうかを確認し、存在する場合はユーザーにその旨を伝えます。それ以外の場合は、次の操作を実行します:

1. 画像テーブル内の対応する画像愛フィールドの値を更新し、値に 1 を追加します。
2. ユーザーが繰り返しクリックすることを防ぐために、ユーザーの IP 情報を pic_ip テーブルに書き込みます。
3. 更新されたいいねの値、つまり写真にいいねをしたユーザーの合計数を取得し、その合計をフロントエンドページに出力します。

リーリー

私がアップロードした添付ファイルのデータベース SQL では、UTF8 でエンコードされたテストデータベースを直接作成し、そこに SQL ファイルをインポートできます。 connect.php 内のデータベース接続情報を変更するだけです。

ここをクリックしてソースファイルをダウンロードしてください。

概要:

実際には、たとえば製品に「いいね！」をしたい場合などに、ajax リクエストを送信することを意味します。製品テーブルには count フィールドが必要です。このフィールドに +1 リクエストを送信します

成功すると、現在の番号を返します。そしてページを変えると

になりますリーリー

この記事がphpプログラミング設計に携わるすべての人に役立つことを願っています。