Django和ajax在不刷新页面的情况下更新数据库

Question

我想点击一个按钮，使我的数据库在不刷新页面的情况下得到更新。我对此做了很多研究，看来jqueryajax调用是最好的选择。但它不起作用。我检查了一下click事件是否起作用，奇怪的是，它只在我单击表中的第一个按钮时起作用（表中用“for循环”显示了用户的所有单词）。但是我得到了一个404错误，所以它让我认为我的错误在我的观点中？当我点击其他单词时，什么都没有发生-没有错误，没有点击事件，什么都没有。但是一切都可以在不使用jquery的情况下运行（即数据库得到更新），但是当然，页面每次都会更新。通过单击按钮，单词将自动添加到用户的单词列表中，而无需刷新页面。我被困在这里，非常感谢你的帮助，谢谢

因此我需要了解：1）如何让每次点击事件都能正常工作；2） 如何在js中获得正确的url；以及3）如何正确看待问题。

我的模板（不带jquery）：

 <a id="add_word" href="{% url 'vocab:add-custom' word.pk %}" class="btn btn-warning btn-sm">Add</a>

我的模板（使用jquery）：

<a id="add_word" href="#" class="btn btn-warning btn-sm">Add</a>
    
      <script type="text/javascript">
        var wordpk = "{{word.pk}}";
      </script>

我的网址：

app_name='vocab'
    
        path("<int:object>/",views.custom_create_word,name="add-custom"),

我的看法是：

 def custom_create_word(request, object):
            if request.method == 'POST':
                pass
            if request.method =="GET":
                from .forms import WordForm
                from .models import Word
                word = Word.objects.get(pk=object)
                user = request.user
                target_word = word.target_word
                source_word = word.source_word
                deck_name = "My Words"
                fluency = 0
                Word.objects.create(user=user, target_word=target_word,
                                     source_word=source_word, deck_name=deck_name, fluency=fluency)
            return HttpResponseRedirect(reverse('vocab:dict'))

我的js：

$(document).ready(function(){
    $("#add_word").click(function() {
      alert('click is working');
      $.ajax({
            url: "/vocab/"+wordpk+"/",
            success: function (result) {
              $("#add_word").html(result);
              alert("it worked");
            }});
          });
        });

更新 我的模板：

<tbody>
        <tr>
          {% for word in dict_list %}
          <td>{{word.target_word}}</td>
          <td>{{word.source_word}}</td>
          <td>
            <a href="javascript:" class="add-word btn btn-warning btn-sm" data-wordpk="{{word.pk}}">Add</a>
          </td>
        </tr>
        {% endfor %}
        </tbody>

Answer 1

您的代码必须如下所示：

 <a href="javascript:" class="add_word btn btn-warning btn-sm" data-wordpk="{{word.pk}}">Add</a>

然后

$(document).ready(function(){
    $(".add_word").click(function() {
      var wordpk = $(this).data('wordpk');
      $.ajax({
            url: "/vokab/"+wordpk,
            success: function (result) {
              $("#add_word").html(result);
              alert("it worked");
            }});
          });
        });

Answer 2

这是我对你第一个问题的回答

您的单击事件只工作了一次，因为您使用的是整个文档中唯一的id。因此，如果在id上添加click事件，那么只有第一个id元素可以工作。但是，html是一种宽容的语言，所以，若您在文档中多次使用id，就不会看到任何html错误。您可以通过w3c Validator验证并查看html是否正常。另见id attributte

所以，解决方案很简单。您可以使用类选择器检查onclick事件。比如：

<a id="add_word" href="{% url 'vocab:add-custom' word.pk %}" class="add_word btn btn-warning btn-sm">Add</a>

现在，您已经在类中添加了add_word，我可以选择具有相同类的所有元素。在jquery中：

$(".add_word").click(function(e) {
    e.preventDefault();       // To prevent default function of anchor tag
    // Your code
});