实现前后端数据交互方法汇总

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

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

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

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

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

// 渲染结果有换行符
var user_id = "https://avatars1.githubusercontent./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'
}

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

<span id="showdata">查看资料</span>
<div style="display:none;" id="box">
  <h2>用户信息</h2>
  <p id="info"><img src="loading.gif" /></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);
  })
})