Javascript数据和HTML传输

Question

In a PHP + jQuery environment, me and my friend can't come along with what is the best solution. We are getting data from a database with Ajax.

Solution 1 - Ajax should only transport data, not HTML

Benefit: We get the data with Ajax with the JSON format. This way Ajax only transports data, not HTML.

Pitfall: The JS now need to handle the HTML so the JS will be filled with HTML markup.

Solution 2 - JS should only contain code, not HTML markup

Benefit: We get the data with Ajax with the HTML format. This way Ajax transports HTML which means the JS can just render it directly. No HTML in the JS code. I can also use the same HTML template as I use with PHP (DRY).

Pitfall: The Ajax transport more data because HTML is bigger. It is also not easy to manipulate.

Question

We now have two cases and I can't see what is best of them. Maybe it's a personal preference? Maybe some of them is recommended over the other for some reason?

Is there a better solution here or is it a personal preference? If so why is that one better? Which would you choose?

Answer 1

Solution 3: Use AngularJS or some other framework that separates JS from HTML at the client side. Only send the data over the network. Benefits:

1. Minimal data over the network, so shorter response times
2. The server can serve multiple client apps with different HTML requirements
3. Clear separation of business logic (server-side), view (HTML files) and presentation logic (JavaScript)

If no other JS framework than JQuery is allowed, then I would recommend solution 1 and still try to separate HTML construction logic from user interaction logic in different JS functions.