来自 django 模板的 Ajax 调用

Posted 2023-02-24

【中文标题】来自 django 模板的 Ajax 调用

【英文标题】：Ajax call from django template

【发布时间】：2012-02-03 09:45:01

【问题描述】：

我有一个 django 模板，它扩展了包含加载 jquery 代码的基本模板。这个模板有一个简单的文本框，我想通过 ajax 获取对象。

% extends 'base.html' %
% block content %

<form id="ajaxform">
    <input type="text" name="first_name" id="name" />
    <input type="submit" value="Submit" />
</form>

<div id="dataDiv">

</div>

<script>
    $('#ajaxform').submit(function()
        console.log('Form submitted');
        $.get('% url get_ajax_data %', $(this).serialize(),function(data)
            $('#dataDiv').text(data);

        )
        return false;
    );

</script>
% endblock %

在此模板中，我尝试对 get_ajax_data url 进行 ajax 调用，在相应的视图中，我只是将文本返回为 return HttpResponse('Ajax respose')。但这似乎不起作用，并且在我返回 false 时提交了表单。我不确定我错过了哪里。

【问题讨论】：

总是使用类似$(document).ready(function() // Your code here );的东西。请详细说明您看到的错误。现在你的问题很难回答。

我尝试添加 $(document).ready 但它似乎不起作用。主要问题是表单被提交，这不应该是因为我已经在submit 中返回 false。

我想通了。缺少一个分号。

【参考方案1】：

直到得到答案，通常的做法是初始化 submit() 处理程序。这是通过在页面准备好时设置它来完成的。目前，您可以通过常规方式提交表单，甚至没有使用您的 javascript 进行注册。要修复它，您可以编写：

$(document).ready(function() 
   $('#ajax_form').submit(fun // the rest of your code here.
);

【讨论】：

我发现了错误。感谢您的帮助。

这在技术上是不正确的。虽然使用$(document).ready() 是最佳实践，但只要javascript 在 受其影响的所有元素并且jQuery 已经初始化，就不会有任何问题。最有可能的是，jQuery 正在页面底部加载，并且此 JavaScript 领先于 jQuery 可用。

【参考方案2】：

如果其中有错误，jQuery 事件处理程序会静默失败。检查明显的东西，比如缺少分号等。确保事件处理程序中的所有内容都有效并且它应该可以工作。

【讨论】：

我做错了，自己也犯了一些错误，但控制台中没有任何错误日志。这就是问题所在。没有错误日志，所以我认为它是正确的，并认为还有其他一些方法可以响应 ajax。非常感谢您指出这种行为。这对我的调试有很大帮助。