jQuery は Ajax_jquery 経由で JSON データを返します

サーバーサイドのPHPはMYSQLデータを読み込み、JSONデータに変換してフロントエンドのJavaScriptに渡し、JSONデータを操作します。この記事では、jQuery が Ajax 経由で PHP サーバーにリクエストを送信し、JSON データを返す方法を例を通じて説明します。

JSON (JavaScript Object Notation) は軽量のデータ交換形式です。人間にとっては読み書きが簡単で、機械にとっては解析と生成が簡単です。 JSON は、フロントエンドとバックエンドの対話プロセスにおいて優れた役割を果たします。以下のチュートリアルを読み続けてください。

<ul id="userlist"> 
  <li><a href="#" rel="1">张三</a></li> 
  <li><a href="#" rel="2">李四</a></li> 
  <li><a href="#" rel="3">王五</a></li> 
</ul> 
<div id="info"> 
  <p>姓名：<span id="name"></span></p> 
  <p>性别：<span id="sex"></span></p> 
  <p>电话：<span id="tel"></span></p> 
  <p>邮箱：<span id="email"></span></p> 
</div> 

この例では、ユーザー名リスト ul#userlist とユーザー詳細レイヤー #info が表示されます。 「rel」属性を設定し、各 タグに値を割り当てていることに注意してください。これは非常に重要であり、jQuery で使用されます。私が達成したい効果は、ユーザーリスト内の任意のユーザーの名前をクリックすると、電話番号、電子メールなどのユーザーの詳細情報がすぐに表示されることです。

CSS

#userlist{margin:4px; height:42px} 
#userlist li{float:left; width:80px; line-height:42px; height:42px; font-size:14px; 
font-weight:bold} 
#info{clear:left; padding:6px; border:1px solid #b6d6e6; background:#e8f5fe} 
#info p{line-height:24px} 
#info p span{font-weight:bold} 

CSS はユーザーリストとユーザー詳細の表示外観を設定します。見栄えの良い外観を自分でデザインすることもできます。

jQuery

jQuery を使用する前に、まず jQuery ライブラリがロードされていることを確認してください。
次に、jQuery コードを書き始めましょう。

$(function(){ 
  $("#userlist a").bind("click",function(){ 
    var hol = $(this).attr("rel"); 
    var data = "action=getlink&id="+hol; 
     
    $.getJSON("server.php",data, function(json){ 
      $("#name").html(json.name); 
      $("#sex").html(json.sex); 
      $("#tel").html(json.tel); 
      $("#email").html(json.email); 
    }); 
  }); 
}); 

ユーザー リスト内の各 タグにクリック イベントをバインドします。ユーザーの名前がクリックされると、次の操作が実行されます。 現在のタグの属性「rel」の値を取得し、データを形成します。 string: var data = "action=getlink&id=" hol、そして、ajax を介してサーバー server.php に JSON リクエストを送信します。バックグラウンド応答を取得した後、JSON データが返され、取得されたデータがユーザーの詳細に表示されます。 。

PHP

フロントエンドから Ajax リクエストを受信した後、バックエンドの server.php は渡されたパラメータを通じてデータベースに接続し、ユーザー テーブルにクエリを実行し、対応するユーザー情報を配列 $list に変換し、最後に配列を次のように変換します。 JSONデータ。 PHP と JSON の操作については、このサイトに集められた記事を参照してください。以下はserver.phpの詳細コードです。データ接続部分は省略していますので、ご自身でデータ接続を確立してください。

include_once("connect.php"); //连接数据库 
$action=$_GET[action]; 
$id=intval($_GET[id]); 
if($action=="getlink"){ 
  $query=mysql_query("select * from user where id=$id"); 
  $row=mysql_fetch_array($query); 
  $list=array("name"=>$row[username],"sex"=>$row[sex],"tel"=>$row[tel],"email"=>$row[email]); 
  echo json_encode($list); 
} 

この記事を通じて、jQuery が Ajax を通じてサーバーに JSON リクエストを送信するメソッド $.getJSON が非常に便利で簡単であることがわかります。また、サーバーから返されたデータを解析して、対応するフィールドの内容を取得できます。これは、HTML リクエストによって返される大量の文字列よりも処理が簡単かつ高速です。

最後に、mysql テーブル構造をアタッチします

CREATE TABLE IF NOT EXISTS `user` ( 
 `id` int(11) NOT NULL auto_increment, 
 `username` varchar(100) NOT NULL, 
 `sex` varchar(6) NOT NULL, 
 `tel` varchar(50) NOT NULL, 
 `email` varchar(64) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。