时间戳

首页 > 解决方案 > Django和ajax在不刷新页面的情况下更新数据库

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

问题描述

我希望单击按钮以更新我的数据库而无需刷新页面。我对此进行了很多研究，似乎 jquery ajax 调用是要走的路。但它不起作用。我检查了单击事件是否有效，奇怪的是它仅在我单击表格中的第一个按钮时才有效（表格显示所有用户的单词都带有'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>

标签： pythonjquerydjangoajax

解决方案

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

您的点击事件只工作了一次，因为您使用的是id，这在整个文档中是唯一的。所以，如果你在id上添加点击事件，那么只有第一个 id 元素会起作用。但是，html 是一种宽容的语言，因此，如果您在文档中多次使用 id，您将不会看到任何 html 错误。您可以从w3c Validator验证并查看您的 html 是否正常。另请参阅id 属性。

所以，解决方法很简单。您可以使用类选择器来检查 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
});

推荐阅读