最佳实践:装载呈现的HTML或JSON?HTML、JSON

2023-09-10 16:37:38 作者:早无谓i

嗨伙计,我有一个问题,觉得愚蠢的,但我还不能说这是为什么。

Hey folks, I have a question which feels stupid but I can't quite say why.

想象一下,与用户和标签web应用程序。用户标记对方。

Imagine a webapp with users and tags. Users tag each other.

我在它显示相对于单个用户,单个标签的详细信息的应用程序得到了一个页面。比方说,用户鲍勃·和标签 footag 。在这个页面上,我显示两个列表:所有谁标记鲍勃'footag所有的人Bob已经标记了footag的人。让我们把这些 < D​​IV ID =收到'> < D​​IV ID =发送>

I've got one page in the app which displays details about a single tag in relation to a single user. Let's say user 'bob' and tag 'footag'. On this page, I'm displaying two lists: all the people who have tagged bob with 'footag' and all the people bob has tagged 'footag'. let's call these <div id="received'> and <div id="sent">

让我们说的URL,这种观点是 /用户/鲍勃/标签/ footag

Let's say the url for this view is /users/bob/tags/footag

当然,这些名单是长 - 我不想在网页浏览加载整个列表。于是我打开了前十位的每个。

Naturally, these lists are long -- I don't want to load the whole list upon pageview. So I load the first ten for each.

现在我可以为每个两种方式之一名单提供动态页面:

Now I can provide dynamic paging for each of the lists in one of two ways:

获取的数据在接下来的10个用户为JSON。写JS来呈现这些数据,替换内容的 DIV 。 获取的HTML渲染片段从另一个我的服务器上明确定义的URL,比如 /用户/鲍勃/标签/ footag /接收?页= 1 。我把它拿来异步只需更换内容相关的&LT; D​​IV&GT; Get the data for the next 10 users as json. Write js to render this data, replacing the contents of the div. Get a rendered "snippet" of html from another well defined URL on my server, say /users/bob/tags/footag/received?page=1. I fetch it asynchronously and just replace the contents of the relevant <div>.

因此​​,在一种情况下我获取数据,并通过JS在浏览器中呈现它,其他的我取呈现的数据,只是plonk的批发它插入到文档中。

So in one case I fetch data and render it via JS in the browser, the other I fetch rendered data and just plonk it wholesale into the document.

有什么理由不使用#2?我无法想象一个,但我想可能有安全方面的问题,我不考虑,还是性能,或别的东西。我更preFER做#2,因为它简化了我的生活显著。

Is there any reason not to use #2? I can't imagine one but I suppose there might be security aspects I'm not considering, or performance, or something else. I'd much prefer to do #2 as it simplifies my life significantly.

谢谢!

推荐答案

我有一个应用程序是这样的 - 我使用这两种方法

I've got an app like this -- I use both methods.

我用你的方法#1更新是不连续的领域(例如输入域所有的地方),但我用你的方法#2更新表格数据,有点像你的清单。

I use your Method #1 to update fields that aren't contiguous (e.g. input fields all over the place), but I use your Method #2 to update tabular data, kind of like your lists.

我会坚持到#2你的情况。

I would stick to #2 for your case.