调用两个函数

Question

单击按钮或链接时，我想要执行2个方法一个是将向第三方发送信息的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.href = /production/production/order/board/5/127.0.0.1:8000/production/soproduct/details/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脚本。所以没有一个答案有效。我不确定Ajax，因为到目前为止无法使它工作。

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

事实证明你有两个问题。一个关于调用两个函数，另一个关于如何“调用后端函数”

调用两个函数

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

注册两个处理程序

$(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

    });
}

Answer 5

到目前为止，很多答案似乎都忽略了这一点。除非我完全曲解你的问题，否则它们只是部分正确。是的，您可以从前端调用后端函数，但是您需要在前端使用Ajax，并且需要将后端函数配置为接受HTTP POST请求。

这个答案假设您正在使用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');
}

如何同样执行JS函数和Django后端方法调用？

5 个答案:

调用两个函数

注册两个处理程序

阻塞性

调用“后端代码”