フロントエンドとバックエンドのデータが科学的にどのように相互作用するべきか

今回は、フロントエンドとバックエンドのデータを科学的に操作する方法と、フロントエンドとバックエンドのデータを操作する際の注意事項について説明します。実際のケースを見てみましょう。

HTMLの割り当て

JSの割り当て

スクリプトはJSONを埋める

AJAXはJSONを取得

WebSocketのデータのリアルタイム送信

概要

1のHTMLの割り当てはElement

<div data-value="<?php echo $user_avatar;?>"></div>

のレンダリング結果の値またはデータ名を出力します。

<div data-avatar="https://avatars1.githubusercontent.com/u/3949015?v=3&s=40"></div>

JS を使用して $('input').val();

$('div').data('avatar');

利点: グローバル変数を占有せず、JS で自由に取得できます。
使用方法の提案: 単純なデータを渡すに適しており、複数の単純なデータを要素にバインドするのにも非常に適しています。

 <li>nimojs <span data-userid="1" >删除</span></li>
  <li>nimo22 <span data-userid="2" >删除</span></li>
  <li>nimo33 <span data-userid="3" >删除</span></li>
  <li>nimo44 <span data-userid="4" >删除</span></li>
  <li>nimo55 <span data-userid="5" >删除</span></li></ul><script>
  $(&#39;span&#39;).on(&#39;click&#39;,function(){ 
    $.post(&#39;/ajax/remove/&#39;,$(this).data(&#39;userid&#39;),function(data){ // ... })
  })</script>

2. JS 割り当て
は、3f1c4e4b6b16bbbd69b2ee476dc4f83a の JavaScript 変数宣言にデータを埋め込みます。

<script>
  var user_avatar = "<?php echo $user_avatar;?>";
  // 渲染结果
  // var user_avatar = "https://avatars1.githubusercontent.com/u/3949015?v=3&s=40";</script>

または Smarty バックエンド テンプレート エンジン を使用します:

<script>
  var user_avatar = "{$user_avatar}";</script>

利点: データを渡すのは非常に便利です。フロントエンドは us​​er_avatar 変数を直接呼び出してデータを使用します。
欠点:

文字列データを転送する場合、グローバル変数 user_avatar が占有されます。 送信するデータが多い場合、多くのグローバル変数が占有されます。

返されたデータに改行があるとJSエラーが発生します
// レンダリング結果に改行文字が含まれています var user_id = "https://avatars1.githubusercontent.com/u/3949015?v=3&s= 40";// Uncaught SyntaxError: Unexpected token ILLEGAL

最適化: バックエンドによって返されるすべてのコンテンツは、グローバル変数の使用を最小限に抑えて、ポイントされる特定の変数に格納できます。例: // PHP コード var SERVER_DATA = { username: {$username}, userid: {$userid}, title: {$title}} // レンダリング結果 var SERVER_DATA = { username: "NimoChu", userid: 1, title : 'F2E'}

使用上の提案: データをできるだけ早く JS に転送する必要があり、データが安定していることが確実な場合は、このメソッドを使用します。データ形式が複雑な場合は、スクリプトを使用して JSON を入力するか、AJAX を使用して JSON を取得することをお勧めします。

3. スクリプトによる JSON の入力**** JSON 構文** は、JSON データを DOM を通じて取得し、オブジェクトに解析します。

<script type="text/template" id="data">{"username":"nimojs","userid":1}</script><script>
  var data = JSON.parse($(&#39;#data&#39;).html());  //{username:"nimojs",userid:1}</script>

利点: ページが読み込まれた後にデータを取得できます。グローバル変数を占有せず、大量のデータ コレクションを渡すことができます。
短所: データ量が特に多い場合、ページの初期読み込みが遅くなります。速度の低下は、ファイル サイズだけでなく、サーバーがデータをクエリしてコレクションを返すのに時間がかかることも原因で発生します。AJAX を使用して JSON を取得し、オンデマンドの読み込みと読み込みの待機を完了することができます。
使用方法の提案: DOM のロード時に使用する必要がある大規模なデータ コレクションを渡すのに適しています。たとえば、フロントエンドはページのレンダリングを制御し、バックエンドは JSON データ ソースを <script> に入力し、フロントエンドは JavaScript テンプレート エンジンを使用してページをレンダリングします。 Javascript テンプレート エンジンを選択するにはどうすればよいですか? </script>

4. AJAX で JSON を取得する AJAX を使用して JSON データを取得します

<span id="showdata">查看资料</span>
<div style="display:none;" id="box"> 
  <h2>用户信息</h2> 
  <p id="info">![](loading.gif)</p>
</div>
$(&#39;#showdata&#39;).on(&#39;click&#39;,function(){ 
  $(&#39;#box&#39;).show(); 
  $.getJSON(&#39;/ajax/userdata/&#39;,function(oData){ 
    // oData = {"username":"nimojs","userid":1} 
    $(&#39;#info&#39;).html(&#39;用户名：&#39; + oData.username + &#39;<br>用户ID：&#39; + oData.userid); 
  })
})

これは、AJAX を通じてユーザー情報を取得する例です。プロセスは次のとおりです:

ページには表示情報のみが表示されます

ユーザーがクリックして情報を表示します

ユーザー情報を表示し、画像を読み込みます

ユーザー情報を取得するためにサーバーにAJAXリクエストを送信します

サーバーは戻りますJSON 文字列を取得すると、$.getJSON が自動的に返されます。 JSON 文字列をオブジェクトに変換します

コンテンツを 081157ee46b27f016eb1f52f4ee681ce に入力します

利点: グローバル変数や DOM ノードを占有しません。データ取得のトリガー条件（ページ読み込み時、情報閲覧時のクリック時、ボタンクリック時）を自由に制御できます。データの取得を開始するときに、読み込み中の画像プレースホルダーを使用して、データが読み取られていることをユーザーに通知できます。ページ上のすべてのデータをロードすることによって引き起こされるページのロードの遅延を防ぎます。

欠点: 追加の HTTP リクエストが生成されます。 DOM がロードされた直後には取得できません。リクエストを送信してレスポンスを受信する必要があります。

使用方法の提案: 主要ではない情報のロード、トリガー条件の設定 (ユーザーがクリックしてデータを表示したとき)、わかりやすいデータ読み取り待機プロンプトの提供に適しています。

5. WebSocket はリアルタイムでデータを送信します。AJAX のリクエストと応答をサーバーにテキスト メッセージを送信し、サーバーがテキスト メッセージに応答するのを待つことにたとえると、WebSocket はサーバーに電話をかけることに似ています。
WebSocket についてはここではあまり紹介しませんが、参考資料を添付します:

WebSocket**

HTML5 WebSocket を使用したリアルタイム Web アプリケーションの構築**

Ajax vs WebSocket**

6正しい方法。実際の状況に応じてデータ取得方法を柔軟に選択できます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

HTMLのボックスモデルの詳細説明

bootstrap-validatorの使用方法の詳細説明

sublimeでHTMLヘッダーコードを素早く作成する方法

以上がフロントエンドとバックエンドのデータが科学的にどのように相互作用するべきかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。