前端 ，后端 关于数据交互的问题?

今天，我和我同事在讨论php 与js交互的时候，他认为：

var type = ;
....

我认为这样比较乱，如果交互数据多了的话，所有，我改成这样

...

<script></script>
var type = $("#hide_value #user_intern_status").val();

...

他说我这样写很麻烦，没必要。
我想知道大家是咋想的，又如何处理前端（js）与后端（jsp,php等）的数据交互的。

回复内容：

重新修改答案后整理了一份《前后端数据交互方法》



在此介绍几种常用的前后端数据交互方法，并给出使用建议。以提高前后端协同开发的效率。
目录:

1. HTML赋值
2. JS赋值
3. script填充JSON
4. AJAX获取JSON
5. WebSocket实时传输数据
6. 总结

1. HTML赋值
输出到 Element 的 value 或 data-name

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

任何时候两种不同的技术发生硬耦合都是非常糟糕的软件设计，因为会带来不可调试、不可追踪等问题，每一种技术都有自己从开发到调试、测试甚至是构建的一套完整技术栈和工作流，当两种技术耦合在一起就会让这个工作流部分或完全失效。

所以从这个角度看，虽然问题里面提出的第二种优于第一种，但是两种方式本质上都是一个问题：硬耦合。第一种方案 JavaScript 和 PHP 耦合在一起了，第二种 HTML 和 PHP 耦合在一起了。所以还有更合理的解决办法，那就是前后端完全 decouple，通过 API 通信获取数据，用 JavaScript 动态渲染页面。 你同事的意思是 要把所有的js代码写到php文件里面？ 不然真不明白第一种写法怎么跑的通
想前后端通讯数据 就用ajax啊。 卧槽。。
你和你的同事从来没听过PHP框架这种概念？ 写页面的几个人呢？
如果前端只有一个，那两种方案都可以。
前端再拆分，写html和写js的分工的话，第二种更好。
还有拆得更合理的方案，就是自定义属性，毕竟第二个方案添加了无意义的元素，不如直接

，甚至hide_value这个元素都可以用不着，直接在其父元素上定义就可以了。获取就是 var data= xx.getJson($("#hide_value").attr('data-val')), jQuery本身没有json处理函数，自己随便搜个下来用吧。


不过这些东西不是都是前端来写吗？后端只负责给出 $user_intern_status，怎么调用是前端自己定的。 为啥不用 php+smarty的框架呢 用框架就有框架自带的方法，但还是觉得js和php要分开来，因为js的变化实在太平凡了。 你不会用smarty动静分离么。或者写jquery 写法都没有错，得看实际情况再挑选最实惠的做法。 其实个人觉得你这样更乱，除非数据是需要通过表单提交的，不然直接赋值给变量不是更好么？

明明一行代码操作就OK的事情，你要用两行代码。