Javascript 可以调用 Django 方法/函数吗？

Can Javascript call a Django method/function?

提问by dialex

Imagine a simple page with a counter and two buttons. The value displayed by the counter is a read/stored in a model's field. I want that when I press the "green" button the counter is incremented by one and when I press the "red" button the counter is decreased by one. What's the best way to implement such behavior:

想象一个带有计数器和两个按钮的简单页面。计数器显示的值是读取/存储在模型字段中的值。我希望当我按下“绿色”按钮时计数器增加一，当我按下“红色”按钮时计数器减少一。实现这种行为的最佳方法是什么：

1. Button calls model's method (Django method) which updates the model's field (DB write); Entire page is refreshed and the counter display updated (DB read).
2. Button calls javascript function which updates the counter display (JS/HTML); In the background, a model's method (Django method) is called to update the model's field (DB write).
3. Yet another way?

1. 按钮调用模型的方法（Django 方法），它更新模型的字段（DB 写入）；刷新整个页面并更新计数器显示（DB 读取）。
2. 按钮调用 javascript 函数来更新计数器显示（JS/HTML）；在后台调用模型的方法（Django 方法）来更新模型的字段（DB 写入）。
3. 还是另一种方式？

Can the javascript code call a Django function? I'm a newbie at Django (I followed the tutorial up to part 4). I already understood the MVC/MTV concept and the data read/write/display, but what's bothering me now is introducing behavior/interactivity on my pages.

javascript 代码可以调用 Django 函数吗？我是 Django 的新手（我按照教程一直到第 4 部分）。我已经理解了 MVC/MTV 概念和数据读/写/显示，但现在困扰我的是在我的页面上引入行为/交互性。

回答by Hui Zheng

JavaScript in browser-side is sitting on the front end, while Django is serving on the backend(server-side). The former can neither nor need to directly call the latter's functions. The interface between them is typically web service APIs, namely, browser that makes AJAX calls with URLs defined in web services, which are backed by Django.

浏览器端的 JavaScript 位于前端，而 Django 则位于后端（服务器端）。前者既不能也不需要直接调用后者的函数。它们之间的接口通常是 Web 服务 API，即使用 Web 服务中定义的 URL 进行 AJAX 调用的浏览器，这些 URL 由 Django 支持。

More specifically, JavaScript sends HTTP requests to web server, in turn Django's URL dispatcher maps the request URLs to corresponding Django views(function-based or class-based). In short, a typical route can be simplified as:

更具体地说，JavaScript 向 Web 服务器发送 HTTP 请求，然后 Django 的 URL 调度程序将请求 URL 映射到相应的 Django 视图（基于函数或基于类）。简而言之，典型的路线可以简化为：

JavaScript -> HTTP request -> Django URL dispacher(mapping rules are in urls.py or urls/XXX.py) -> Django view function(views.py or views/XXX.py) -> Django form(optional) -> Django model(optional).

JavaScript -> HTTP 请求 -> Django URL 调度器（映射规则在 urls.py 或 urls/XXX.py） -> Django 视图函数（views.py 或 views/XXX.py） -> Django 表单（可选） -> Django 模型（可选）。

For more Django technical details, you may refer to Django tutorialor Practical django Projects.

更多 Django 技术细节，可以参考Django 教程或Practical django Projects。

Final word: even if JavaScript could call Django function method/function, it should be avoided. From web service's perspective, Django methods/functions are only implementation detail, which are more subject to change(compared to web service API). Backend developers may change function name, switch to some framework other than Django, or even change programming language like Java, Ruby or PHP for whatever reason.

最后一句话：即使 JavaScript 可以调用 Django 函数方法/函数，也应该避免。从 Web 服务的角度来看，Django 方法/函数只是实现细节，更容易发生变化（与 Web 服务 API 相比）。后端开发人员可能会更改函数名称，切换到 Django 以外的其他框架，甚至出于任何原因更改 Java、Ruby 或 PHP 等编程语言。

回答by Paul D. Waite

JavaScript runs in the browser, whereas Django runs on the server. Browsers communicate with servers using HTTP.

JavaScript 在浏览器中运行，而 Django 在服务器上运行。浏览器使用 HTTP 与服务器通信。

You can make an HTTP call from JavaScript using the XMLHttpRequestAPI. (This is often referred to as AJAX.) You can send an HTTP GET request (the same request a browser sends when you click a link) or an HTTP POST request (the same request a browser sends when you submit some forms) to a URL on the server.

您可以使用XMLHttpRequestAPI从 JavaScript 进行 HTTP 调用。（这通常称为 AJAX。）您可以向服务器上的网址。

You set Django up to handle this URL via urls.py, as I'm sure you know from the tutorial.

您将 Django 设置为通过 urls.py 处理此 URL，我相信您从教程中知道。

回答by Lysergia25

Use AJAX, jQueryor dajaxmakes it nice and easy.

使用 AJAX、jQuery或dajax使其变得简单易用。