Javascript 如何使用jQuery在django模板中单击表单提交时调用两个URL

我有这个表单，django中的用户登录表单

<form method="post" id="loginSubmit" action="{% url 'auth_login' %}">{% csrf_token %}
<table>
<tr>
    <td>{% trans form.username.label_tag %}</td>
    <td>{{ form.username }}</td>
    <td><i class="fi-torso"></i></td>
</tr>
<tr>
    <td>{% trans form.password.label_tag %}</td>
    <td>{{ form.password }}</td>
    <td><i class="fi-key"></i></td>
</tr>

<tr>
    <td colspan="3"><input type="submit" id="Login" class="button expand" value="{% trans "Login" %}" /></td>
</tr>
</table>
</form>

{%csrf\u令牌%}
{%trans-form.username.label_tag%}
{{form.username}
{%trans-form.password.label_tag%}
{{form.password}}

我必须在单击submit按钮时调用两个url，因为它通过操作发送一个url，通过ajax发送另一个url，如下所示：

<script type="text/javascript">
$(document).ready(function() {     

    $("#Login").click(function() { 

        $.ajax({
            type: "POST",
            url: "{% url 'user_group' group_name %}",
            datatype: "html",
            data: $("#loginSubmit").serialize(),
            success: function(data) {                   
            }
        });   

    });

});

</script>  

$（文档）.ready（函数（）{
$（“#登录”）。单击（函数（）{
$.ajax({
类型：“POST”，
url:“{%url'用户组'组名称%}”，
数据类型：“html”，
数据：$（“#loginSubmit”）.serialize（），
成功：函数（数据）{
}
});   
});
});

发生的情况是，当我在登录表单中单击submit按钮时，它会执行第一个操作url，即

auth_login

，并重定向到它，而不调用ajax url。 正如我所知，表单在其操作url提交的原因，此操作发生在服务器端，ajax调用发生在客户端，服务器端重定向首先发生在客户端。但如何解决这种情况，因为我想在同一个提交按钮上调用两个URL

请建议。

<script type="text/javascript">
$(document).ready(function() {     

    $("#Login").click(function(e) { 
        e.preventDefault();

        $.ajax({
            type: "POST",
            url: "{% url 'user_group' group_name %}",
            datatype: "html",
            data: $("#loginSubmit").serialize(),
            success: function(data) {                   
            }
        });

        $("#loginSubmit").submit();
    });

});

</script>

$（文档）.ready（函数（）{
$（“#登录”）。单击（函数（e）{
e、 预防默认值（）；
$.ajax({
类型：“POST”，
url:“{%url'用户组'组名称%}”，
数据类型：“html”，
数据：$（“#loginSubmit”）.serialize（），
成功：函数（数据）{
}
});
$（“#登录提交”）.submit（）；
});
});

如果不起作用，那么在ajax的

success

函数上放置

$（“#loginSubmit”）.submit（）

，但这次表单将在ajax响应后提交

编辑：在这里使用JQuery.ajax的

complete

回调函数而不是

success

更准确。

试试这个方法

      $(document).ready(function() 
   {     

   $("#Login").click(function() { 

        $.ajax({
         // create an AJAX call...
            data: $("#loginSubmit").serialize(), // get the form data
            type: 'GET', // GET or POST
            url: '{% url 'user_group' group_name %}', // the file to call
            success: function (data) {
            $("#state_table").html(data);
                //alert('ajax call suceessfully');
             },
             error: function(data) {
            $("#state_table").html("Something went wrong!");
            }
        });
     });
  });

---

您好，感谢您的意见，iskorum，我已经这样做了，但它不起作用，正如您在ajax成功函数中所说的表单提交，我这样做了，但它在从ajax调用成功返回后调用，然后发生的是，我必须在提交按钮上单击两次，首先单击它从ajax返回，然后单击它重定向到操作url。但我希望它发生在同一个实例上，只需点击一下。请建议ajax（）有

已完成的

函数，它将在所有条件下被调用。ajax请求完成后表单将被提交，无需再次单击？这有帮助吗？哦，太好了，太棒了，很有效。谢谢你，伊斯科伦。但还有一件事我想澄清，当我为submit创建input type=“button”时，只有当我执行input type=“submit”时，它才起作用，然后在向ajax发送请求之前，调用表单动作url，请求进入服务器端。在表单提交按钮上有没有办法调用两个URL。

e.preventDefault（）必须在这里工作吗？这可以防止元素的取消默认操作（这里是提交表单）。我们称之为
$（“#loginSubmit”）.submit（）