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

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

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 割り当て

利点:
データの受け渡しはとても便利です。フロントエンドは user_avatar 変数を直接呼び出してデータを使用します。

欠点:

文字列データを転送するには、グローバル変数 user_avatar が占有されます。送信するデータが多い場合、多くのグローバル変数が占有されます。
返されたデータに改行が含まれている場合、JS はエラーを報告します

// 渲染结果有换行符
var user_id = "https://avatars1.githubusercontent.com/u/3949015&#63;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 データを

著者別の最新記事