Front end, back end questions about data interaction?

Today, my colleague and I are discussing the interaction between PHP and JS, he thinks:

I think this is messy, if the interaction data more, all, I changed to this



...


He said it was troublesome for me to write like this, not necessary.
I want to know what people think, and how to deal with the front-end (JS) and back-end (jsp,php, etc.) data interaction.

Reply content:

after revising the answer, a copy of the front-end data interaction method "



This paper introduces several common methods of data interaction in front and back, and gives suggestions for usage. To improve the efficiency of the front-end collaborative development.
Directory:

1. HTML Assignment
2. JS Assignment
3. Script Fill JSON
4. Ajax Get JSON
5. WebSocket Real-time data transfer
6. Summary

1. HTML Assignment
Output to value or Data-name of Element

">

Hard coupling between two different technologies at any time is a very bad software design, because it brings problems such as non-debugging, non-traceability, and each technology has its own set of complete technology stacks and workflows, from development to debugging, testing, and even building, when the two technologies are coupled together to partially or completely invalidate the workflow.

So from this point of view, although the second one is better than the first, the two approaches are inherently a problem: hard coupling. The first scenario is that JavaScript and PHP are coupled together, and the second HTML is coupled with PHP. So there is a more reasonable solution, that is, the front and back end of the full decouple, through the API communication to obtain data, with JavaScript dynamic rendering page. Does your colleague mean to write all of the JS code in the PHP file? I don't know how to run the first one.
If you want to communicate data back and forth, use Ajax. Horizontal slot.
Have you and your colleagues never heard of the concept of PHP framework? How many people write the page?
If there is only one front end, both options are available.
Front-end re-split, write HTML and write JS division, the second kind of better.
There is a more reasonable solution, that is, the custom attribute, after all, the second solution to add meaningless elements, rather than direct '} ', even hide_value this element can not be used, directly on its parent element defined on it. Fetch is the Var data= xx.getjson ($ ("#hide_value"). attr (' Data-val '), jquery itself does not have the JSON processing function, oneself randomly searches down to use.


But aren't all of these things front-end to write? The backend is only responsible for giving $user _intern_status, how the call is the front-end of their own set. Why do not use the framework of the Php+smarty frame with the framework of the method, but still think JS and PHP to separate, because JS changes is too ordinary. You don't use smarty to separate. Or write jquery is not wrong, you have to look at the actual situation and choose the most affordable way. In fact, personally think you are more chaotic, unless the data is to be submitted through the form, or directly assigned to the variable is not better?

Obviously a line of code operation is OK, you need to use two lines of code.

