フロントエンドとバックエンドのデータ連携方法まとめ_基礎知識

この記事は、フロントエンドとバックエンドの共同開発の経験がほとんどない初心者に適しています。

HTML 割り当て

要素の値またはデータ名に出力

<input type="hidden" value="<&#63;php echo $user_avatar;&#63;>" />
<div data-value="<&#63;php echo $user_avatar;&#63;>"></div>

レンダリング結果

<input type="hidden" value="https://avatars1.githubusercontent.com/u/3949015&#63;v=3&s=40" />
<div data-avatar="https://avatars1.githubusercontent.com/u/3949015&#63;v=3&s=40"></div>

JS を使用して

を取得します

$('input').val();
// http://jquery.bootcss.com/jQuery.data/
$('div').data('avatar');

利点:

グローバル変数を占有せず、JS によって自由に取得できます。

使用上の提案:

単純なデータを渡すのに適しており、複数の単純なデータと要素の間の関係をバインドするのにも非常に適しています。

<ul>
<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>
$('span').on('click',function(){
  $.post('/ajax/remove/',$(this).data('userid'),function(data){
    // ...
  })
})
</script>

JS 割り当て

<script> の JavaScript 変数宣言にデータを入力します。 </script>

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

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

var user_avatar = "{$user_avatar}";

利点:
データの受け渡しはとても便利です。フロントエンドは 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 を取得することをお勧めします。

スクリプトが JSON を埋める
JSONとは何ですか?

JSON データを <script> タグに入力すると、フロントエンドが DOM を通じて JSON 文字列を取得し、それをオブジェクトに解析します。 </script>

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

利点:

ページの読み込み後にデータを取得できます。グローバル変数を占有せず、大量のデータ コレクションを渡すことができます。

欠点:

特にデータ量が多い場合、ページの初期読み込みが遅くなります。速度の低下は、ファイル サイズだけでなく、サーバーがデータをクエリしてコレクションを返すのに時間がかかることも原因で発生します。AJAX を使用して JSON を取得し、オンデマンドの読み込みと読み込みの待機を完了することができます。

使用上の提案:

DOM のロード時に必要な大規模なデータ コレクションを渡すのに適しています。たとえば、フロントエンドはページのレンダリングを制御し、バックエンドは JSON データ ソースを <script> に入力し、フロントエンドは JavaScript テンプレート エンジンを使用してページをレンダリングします。 </script>

AJAX Get JSON

AJAX を使用して JSON データを取得します

<span id="showdata">查看资料</span>
<div style="display:none;" id="box">
  <h2 id="用户信息">用户信息</h2>
  <p id="info"><img  src="/static/imghwm/default1.png"  data-src="loading.gif"  class="lazy" / alt="フロントエンドとバックエンドのデータ連携方法まとめ_基礎知識" ></p>
</div>
$('#showdata').on('click',function(){
  $('#box').show();
  $.getJSON('/ajax/userdata/',function(oData){
    // oData = {"username":"nimojs","userid":1}
    $('#info').html('用户名：' + oData.username + '<br>用户ID：' + oData.userid);
  })
})

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

ページには閲覧情報のみが表示されます
ユーザーがクリックして情報を表示します
ユーザー情報と読み込み画像を表示
AJAX リクエストをサーバーに送信してユーザー情報を取得します
サーバーは JSON 文字列を返し、$.getJSON は返された JSON 文字列をオブジェクト
に自動的に変換します。

に内容を入力します。

利点:

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

欠点:

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

使用上の提案:

メイン以外の情報のロード、トリガー条件の設定 (ユーザーがクリックして情報を表示したとき)、わかりやすいデータ読み取り待機プロンプトの提供に適しています。

WebSocket はリアルタイムでデータを送信します
AJAX のリクエストと応答を、サーバーにテキスト メッセージを送信し、サーバーがテキスト メッセージに応答するのを待つことにたとえると、WebSocket はサーバーに電話をかけることに似ています。

ここでは WebSocket についてはあまり紹介しません。参考資料は次のとおりです。

Wiki:WebSocket
HTML5 WebSocket を使用してリアルタイム Web アプリケーションを構築する
Ajax と WebSocket

概要
あらゆる状況に適した適切な方法があり、絶対に正しい方法というものはありません。実際の状況に応じてデータ取得方法を柔軟に選択できます。

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