Question

我正在学习Ajax，我遇到了一个小问题。

我尝试使用ajax向django后端提交POST请求。即使警报不会出现在屏幕上。正如我在测试django服务器shell中看到的那样，它甚至不提交POST请求。

代码：

<script type="text/javascript">
    $('#btnLike').on('click', function(event) {
     alert('ok');

      $.ajax({
       type: 'POST',
        url: 'http://127.0.0.1:8000/backend/website/like', /* for testig */
        data: {
         csrfmiddlewaretoken: {% csrf_token %},
         post_id = $('#post_id').val(),
         },
       });
      });
</script>

HTML表单：

<form onsubmit="return false">
 {% csrf_token %}
 <input type="text" name="post_id" value= {{post.pk}} hidden="hidden">
 <button type="submit" name="btnLike" class="btn btn-info">Like</button>
</form>

我知道我做了一件可怕的事，但我不知道是什么。

Answer 1

您的选择器$('#btnLike')不正确，它正在寻找一个id="btnLike"的按钮。

试试这个：

<button type="submit" id="btnLike" class="btn btn-info">Like</button>

请确保在HTML中加载jQuery库并将所有jQuery代码包装到

中

$(document).ready(function(){ 
    //your code goes here
 });

Answer 2

问题在于你的url值。删除IP地址。使用相对寻址。也把id放到你的按钮上。

$('#btnLike').on('click', function(event) {
 alert('ok');

  $.ajax({
   type: 'POST',
    url: 'backend/website/like', /* for testig */
    data: {
     csrfmiddlewaretoken: {% csrf_token %},
     post_id = $('#post_id').val(),
     },
   });
  });

按钮HTML

<form onsubmit="return false">
 {% csrf_token %}
 <input type="text" name="post_id" value= {{post.pk}} hidden="hidden">
 <button type="submit" id="btnLike" class="btn btn-info">Like</button>
</form>

Answer 3

供参考：如果您正在序列化表单（根据yts的注释），那么您不需要在AJAX代码中明确包含csrf_token。但是如果你只使用AJAX，那么传递令牌，如：

csrfmiddlewaretoken: '{{ csrf_token }}',

不

csrfmiddlewaretoken: '{% csrf_token %}',

模板变量{{ csrf_token }}输出令牌字符串，例如

'mytoken123456789'

而标记{% csrf_token %}输出隐藏的HTML输入元素：

<input type="hidden" name='csrfmiddlewaretoken' value='mytoken123456789' />

您在上面的评论中提到的语法错误是因为它试图解析此输入元素而不是令牌字符串。

ajax - Ajax代码没有执行

3 个答案: