Question

Django和Ajax的新手。

我想知道良好实践网页设计的一般问题：应该是一个视图函数返回一个使用ajax调用的调用，返回数据结构并将HTML页面的呈现留给客户端（意思是javascript），还是一个“好的”实践来渲染整个HTML并将其返回给javascript所以它可以将其粘贴到代码中的某个位置吗？

我不希望javascript重复我的模板的逻辑。我想使用模板呈现HTML并将其返回给客户端。但是......错过了ajax的观点，不是吗？

我确实遇到了这篇精彩的帖子： Rendering JSON objects using a Django template after an Ajax call

由于它已经老了，我没有在那里发布回复，而是在这里恢复了这个问题。在技术上可以在服务器端渲染吗？是。最佳实践？我不知道。

或许更好的做法是让我的HTML页面排列为“空白空间”，并且只是前后传递数据。

我很想听听你对此事的看法。

由于此讨论倾向于以意见为基础（确实如此）并且该格式不适合此论坛，因此我暂时保持不变，但我更新帖子以包含更精细的讨论解决方案很多技术含义。

在您的“djangonian”体验中，构建可以使用ajax调用动态更新的网页（例如新闻源）的最佳做法是什么，该网页返回客户端原始数据（例如使用JSON））而不是预渲染的HTML？

我会更具体：我的网站有一个Feed。在该Feed上，用户会在每个帖子中看到许多帖子和评论。每个帖子都是自己的HTML表单，并且已经结构化为HTML。页面源的示例：

<form id="post_looloo_by_testuser" method="post" action="/bz/login/" class="single_post_form">      
    <input type='hidden' name='csrfmiddlewaretoken' value='GfOHEMxx433XBUpg3yakTYPRQCVq132f' />
    <p class="box_single_post">
      <span name="post">
        <label class="single_post_form">
           says: looloo
        </label>
      </span>

      <span name="comments_for_post">
        <span name="single_comment">
          <label class="single_comment">
            testuser2 commented: moomoomoo
          </label>
        </span>
      </span>


      <span name="comments_for_post">
        <span name="single_comment">
          <label class="single_comment">
            testuser2 commented: qweqwe
          </label>
        </span>
      </span>


      <span name="add_comment">
        <input id="id_add_comment" maxlength="140" name="new_comment" type="text" placeholder="Add a comment..."/>
      </span>
    </p>
</form>

在Facebook上，用户可以立即添加新帖子。

<form id="add_post_form" method="post" action="" class="new_post_form" username="testuser">
  <input type='hidden' name='csrfmiddlewaretoken' value='GfOHEMxx433XBUpg3yakTYPRQCVq132f' />
  <span name="add_post">        
    <input id="id_add_post" maxlength="140" name="new_post" type="text" placeholder="Say something"/>
    <input id="add-post-btn" type="submit" name="submit" value="Add" username="testuser"/>
  </span>
</form>

“添加”按钮（实际上是表单的提交）然后将调用对我服务器端应用程序中某个视图的ajax调用。我希望视图返回信息，例如拥有帖子的用户，帖子文本，评论列表等。信息将以JSON或XML形式返回。不是预渲染的HTML。我想让我的javascript处理信息并使用新帖子更新用户的feed，同时避免刷新页面（因此使用ajax）。

问题是用户当然可以添加无限数量的帖子（或有限数量，但大于一个）。为什么这有关系？见下面的问题：

我应该如何以允许我使用动态检索的信息更新页面上的变量的方式创建供稿页面，并且仍允许添加更多帖子？

如果我事先知道只有一个这样的新帖子可用，那么我会创建一个预制的帖子表单，不可见，并且javascript会将值设置为该表单并将其设置为可见。但是用户添加的第二篇文章怎么样？第三个？等等...

我很乐意从你的经历中学习。谢谢。

Answer 1

不，你不应该。

AJAX调用应仅包含标准格式的请求资源，而不是某些自定义HTML，例如，如果我请求/cars，我希望获得car的实例列表标准格式（JSON或XML），后端服务器不应该知道也不关心我如何呈现这些数据。

同样最好在客户端生成HTML以避免通过网络传输不必要的数据，假设我请求一些/cars并获得几十个，每个都有一个HTML表标记...这可以在客户端添加许多不必要的标记，而不必通过网络传输，因此节省了带宽，这一点非常重要，尤其对于移动用户而言。

最后，通过AJAX调用的端点控制器应该很简单，并且不包含任何与视图相关的代码，首先要缩短响应时间几毫秒，然后再调整以便如果你想更改UI，你就会改变它在您的HTML / CSS / JS文件中，根据您的解决方案的复杂性，它们可能完全是不同应用程序的一部分（如果您的应用程序仅用于为第三方Web应用程序提供API，那该怎么办？您需要第三方用于控制演示文稿的应用程序，同时仅提供原始数据。）

关于你的编辑，我真的没有看到向页面添加潜在无限数量的HTML元素有什么问题...你不需要在HTML文件中预先声明每个元素，你可以通过Javascript动态创建无限量的它们，然后将它们插入到您想要的任何位置。

对于“我将如何做一个基于AJAX的新闻源”问题，这取决于我的动机，它可以在基本的服务器生成的页面和可选的AJAX刷新之间进行（模板同时存在于服务器和Javascript中）将AJAX数据呈现给一个完整的Ember应用程序，服务器只提供一个JSON API。

Answer 2

在服务器端渲染可能比在客户端更快。但是，它需要在您的服务器上提供更高的性能。

如果您已经在django中编写了模板，则可以通过返回完整的html数据来节省开发时间。否则你必须在JS中编写自己的渲染方法。

在这种情况下，如果您在django中更改任何内容，则必须在客户端代码上复制自己。

我个人认为在服务器上渲染更安全，更简单。

Answer 3

我觉得退后一步很重要，并在这里打破一些术语。正如您所使用的那样，渲染可能涉及以下几个方面：

在浏览器中呈现html标签和css规则，根据从服务器或服务器收到的数据为用户创建网页视图。
将数据呈现在服务器端的某种响应上，供客户端浏览器使用，或者碰巧遵循正在使用的协议的任何其他工具（本例中为HTTP）。

这些不同的活动实际上并不相关，但我认为使用同一术语来表示两者的能力可能让您感到困惑。 Django将呈现对HTTP查询的响应，询问资源，该响应是包含HTML还是JSON还是纯文本并不重要。

现在，那就是说，你是否想在服务器端（模板）或客户端（js）上以某种方式创建网页的更多工作更多的是一个风格问题（有一些当然，允许从您的特定用例中产生的实用性。

出于我自己的目的，我通常更喜欢在模板中呈现一般数据（可能是组织名称，导航变量等），如果我显示从数据库中提取的未知或大量数据，我将为此启动一个AJAX调用，并向用户显示数据正在加载的指示。

但经验将成为您适当和何时的指导。

Answer 4

谢谢大家的回复。

我想更新一下，我决定采用优雅的解决方案，这也变得更加实用，这意味着让客户端开展工作：

我只将精益JSON元素传输到客户端;我让客户端生成相关的HTML。

是的，它有点像重复＆＃34;我自己，因为服务器端和客户端都有类似的代码段来处理完全相同的HTML段的创建。

尽管如此，我清楚地知道，在这种情况下松散耦合对于能够扩展到其他非PC接口（如android，ios，windows phone等）至关重要。

而且 - 这种方式更快。当客户端可以使用无数量的HTML时，无需为服务器端负担。

再次感谢大家。

我的结论是 - 做对了，即使费用似乎更高。

我应该在服务器端呈现ajax响应吗？

4 个答案: