如何在同一次点击中执行JS函数和Django后端方法调用

Question

我有两个方法要在单击按钮或链接时执行一个是将信息发送给第三方的Javascript，第二个是将更新数据库中字段的后端Django方法。通过这种方式，我可以控制JavaScript函数只执行一次。

理想情况下，Javascript应该首先执行，只有在执行后，后端方法才会被触发

我试图在同一个链接中组合它，但这是错误的，因为只有javascript执行

<a href="{% url 'add_to_production_board' pk=soproduct.id uri=request.build_absolute_uri %}" onclick="AddCardToTrello()">Add to Trello</a>

我有什么选择？我可以从JavaScript调用我的后端方法吗？

更新：

尽管有这么多好的答案，但在我的情况下，如何生成后台调用是一件棘手的事情{% url 'add_to_production_board' pk=soproduct.id uri=request.build_absolute_uri %}

我使用Django作为我的后端，从JavaScript中调用后端方法和直接点击可能有一些区别。发生的情况是，当从JS域名内调用时，它会被切断

window.location.htm=/生产/生产/订单/板/5/127.0.0.1:8000/生产/副产品/细节/5/

当真正的链接是时

http://127.0.0.1:8000/production/production/order/board/5/http://127.0.0.1:8000/production/soproduct/details/5//

因此，不知何故，当我从Javascript调用该方法时，它切断了URL（域名）的第一部分，这可能会破坏JS脚本。所以没有一个答案是有效的。我不确定阿贾克斯的情况，因为到目前为止还没能发挥作用。

Answer 1

AddCardToTrello(event) {  
  event.preventDefault(); //to stop the page from redirecting
  doStuff(); // do the stuff you to do first
  var href=$(this).attr('href');  
  window.location = href; // redirect here 
}

Answer 2

要扩展@TrampolineTales的答案，由于您的两个操作之一是导航到不同的页面，因此您可以

function addCardThenGo(url) {
    AddCardToTrello();
    window.location.href = url;
}

然后

<a onclick="addCardThenGo({% url 'add_to_production_board' pk=soproduct.id uri=request.build_absolute_uri %})">Add to Trello</a>

Answer 3

您可以简单地创建一个函数，其中包含要执行的两个函数。

function toBeExecuted() {
   f1();
   f2();
}

Answer 4

到目前为止，很多答案似乎都没有切中要害。除非我完全误解了你的问题，否则它们只是部分正确的。是的，您可以从前端调用后端函数，但您需要在前端使用Ajax，并且后端函数需要配置为接受HTTPPOST请求。

这个答案假设您使用的是jQuery。此外，还不清楚后端功能的名称或服务器的配置方式。我在这里做了很多假设。您应该提供更多信息。

function callBackEnd(url) {
  $.post(url, function() {
    console.log('HTTP POST sent');
  });
}

---

function AddCardToTrello() {
  // ...do whatever this does
  // call the backend
  callBackEnd('http://www.yourserver.com/backend/function');
}

Answer 5

原来您有两个问题。一个是关于调用两个函数，另一个问题是如何"在后端调用一个函数"

调用两个函数

您可以使用其他人指出的内容（一个函数调用其他两个函数）。如果你不想这样，你可以注册两个事件处理程序

注册两个处理程序

$(function(){
   $(".demo").click(function(){
        console.log("handler1");
     });
  $(".demo").click(function(){
        console.log("handler2");
     });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="demo" >Add to Trello</a>

妨碍

如果您想使用阻塞性javascript（而不是推荐），您可以执行以下

function handler1(){
  console.log("handler 1");
}
function handler2(){
  console.log("handler 2");
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a class="demo" onclick="handler1();handler2()" >Add to Trello</a>

调用"后端代码"

虽然这并不是你"第二个"问题的答案，但我添加它确实是为了给你一些指导。你的问题也很宽泛。这取决于很多事情（例如，您在"后端"上使用的平台/语言）。在评论和其他帖子中查找有关此主题的一些宝贵资源。

您需要通过http在服务器（"后端"）上公开您的"函数"。这将您的"函数"作为http服务公开给客户端。您的客户端（浏览器）可以使用XHR调用http服务。下面是一些使用jquery的框架代码。

function handler1(){
    // there are many other methods like $.get $.getJSON
    $.ajax({
       type: 'GET',
       dataType: 'json',
       url: "http://piedpiper.com/api/callers"
    }).then(function(result) {
        // do something with the result
    });
}