Ajax/Django .append()发送POST请求
我正在创建一个网页,用户提交一个表单,然后在Django中创建一个对象(使用Ajax,因此页面不刷新)。当我在成功的响应部分中不包含.append()方法时,此工作正常。Ajax/Django .append()发送POST请求
但是,当我试图在成功请求后添加一个新的语义UI卡时,页面通过普通的POST请求刷新并提交给Django,而不是通过Ajax,因此页面不刷新。你知道这可能是为什么吗?
$('#post-form').on('submit', function(event){
event.preventDefault();
console.log("form submitted!")
create_post();
});
function create_post() {
$.ajax({
url : "/create_post/", // the endpoint
type : "POST", // http method
data : { post : $('#post').val() }, // data sent with the post request
// handle a successful response
success : function(json) {
$('#post').val(''); // remove the value from the input
console.log(json); // log the returned json to the console
// this causes the page to refresh and the form to POST
$('#add-card').append("
<div class='ui card'>
<div class='content'>
<div class='description'>
Test Test test
</div>
</div>
</div>
");
console.log("success");
},
});
};
和HTML页面:
<div class="ui four cards" id="add-card">
<div id="add-card">
</div>
</div>
您是否获得在控制台中的任何错误?
你不应该有两个页面上的元素用相同的ID,add-card
要传递到append
的字符串可能会导致一个语法错误。字符串不能像JavaScript那样继承到下一行。请关闭每行上的字符串,并用+
连接它们,或尝试在每行的末尾添加一个\
,该行不会终止字符串。
A.串联串在一起:
$('#add-card').append(
"<div class='ui card'>"+
" <div class='content'>"+
" <div class='description'>"+
" Test Test test"+
" </div>"+
" </div>"+
"</div>"
);
或B.带斜线端线,如果该字符串继续到下一行。 (看起来更好,但可能会导致错误,将来如果你修改的内容):
$('#add-card').append("\
<div class='ui card'>\
<div class='content'>\
<div class='description'>\
Test Test test\
</div>\
</div>\
</div>\
");
有一对夫妇在这里的问题可能会导致一个问题...
1)要附加其他元素与id
(#
)相同。 id
应该是唯一的,class
s(.
)不是。
2)在JS,你不能只对单独行的字符串内容不串联它们,这样做,而不是...
$('#add-card').append(
'<div class="ui card">' +
' <div class="content">' +
' <div class="description">' +
' Test Test test' +
' </div>' +
' </div>' +
'</div>'
);
请注意类名称上的单引号 – csum
对不起,我粘贴了(3)的错误代码。函数名称是正确的,我只是在我的文章中更改它 –
谢谢,这个作品!为了将来的参考,JavaScript错误应该打印到控制台?我没有得到任何错误,并想知道如何捕捉错误? –
是的,他们应该是,但如果页面在同一时间重新加载,您将失去控制台中的内容,因此在这种情况下您可能会忽略它。当然,你总是可以把东西包装在旧的'try {...} catch(ex){...}' – csum
此外,控制台体验将取决于你的浏览器。 (有些浏览器没有定义'console'对象,因此如果代码要进入生产环境,请注意'console.log()'调用。) – csum