jQuery は Ajax 経由で PHP サーバーにリクエストを送信し、JSON データを返します。

この記事では、jQuery が Ajax 経由で PHP サーバーにリクエストを送信し、JSON データを返す方法を主に紹介します。この知識ポイントには、jquery、ajax、php、および json が含まれています。興味のある方は、json

JSON( JavaScript Object Notation) を返す jquery ajax について学ぶことができます。 ) は軽量のデータ交換フォーマットです。人間にとっては読み書きが簡単で、機械にとっては解析と生成が簡単です。 JSON は、フロントエンドとバックエンドの対話プロセスにおいて優れた役割を果たします。

サーバーサイドのPHPはMYSQLデータを読み込み、JSONデータに変換してフロントエンドのJavaScriptに渡し、JSONデータを操作します。この記事では、jQuery が Ajax 経由で PHP サーバーにリクエストを送信し、JSON データを返す例を示します。この記事を読んでいる読者は、jQuery、Ajax、および PHP に関する関連知識を持ち、それらを上手に使用できる必要があります。

XHTML

<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> 
<p 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> 
</p>

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

CSS

#userlist{margin:4px; height:42px}

#userlistli{float:left; width:42px; font-size:14px;ウェイト:ボールド}
#info{クリア:左; パディング:6px; ボーダー:1px 背景:#e8f5fe}
#info p{ラインの高さ:24px}
#info p スパン{フォント-ウェイト:ボールド}

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

jQuery

jQueryを使用する前に、最初にjQueryライブラリがロードされていることを確認することを忘れないでください。

<script type="text/javascript" src="../js/jquery.js"></script>

次のステップは、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); 
    }); 
  }); 
});

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

PHP

フロントエンドからAjaxリクエストを受信した後、バックエンドのserver.phpは渡されたパラメータを介してデータベースに接続し、ユーザーテーブルをクエリし、対応するユーザー情報を配列$listに変換し、最後に配列を JSON データに変換します。 PHP と 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;

以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

SSH+Jquery+Ajaxフレームワークの統合

Ajaxと従来のWeb開発の類似点と相違点

Jqueryの$.ajax()メソッドパラメータの詳細な説明

以上がjQuery は Ajax 経由で PHP サーバーにリクエストを送信し、JSON データを返します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。