ajax - Ajax代码没有执行

问题描述：

我在学习Ajax，遇到了一个小问题。ajax - Ajax代码没有执行

我想提交POST请求到ajax的Django后端。即使警报不会显示在屏幕上。正如我在测试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>

我知道我在做什么可怕的错误，但我不知道是什么。

你检查了你的JavaScript控制台的错误？ – yts

现在你提到它了，是的。有一个“Uncaught SyntaxError：Unexpected token david20002062

不知道这是否是问题，但无论哪种方式，您应该用引号括起来，比如'{％csrf_token％}' – yts

答

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

试试这个：

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

请确保你在你的HTML载入jQuery库和包装你所有的jQuery代码到

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

谢谢你的回答，但不幸的是它仍然无法正常工作。不过，即使警报也不会显示。 – david20002062

然后我必须问你是否正确加载jQuery？ –

我认为是的，我的意思是我在html文件的第nd处将脚本标记放在了google cdn中。 – david20002062

答

问题是用你的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>

感谢您的回答，但不幸的是它仍然无法正常工作。 – david20002062

答

供参考：如果你序列化形式（按青训营的评论），那么你就不必明确包括在你的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代码没有执行

相关推荐