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>

来源

2016-01-13 K J

您是否获得在控制台中的任何错误？

你不应该有两个页面上的元素用相同的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>\ 
");

来源

2016-01-13 18:40:47 csum

谢谢，这个作品！为了将来的参考，JavaScript错误应该打印到控制台？我没有得到任何错误，并想知道如何捕捉错误？ –

是的，他们应该是，但如果页面在同一时间重新加载，您将失去控制台中的内容，因此在这种情况下您可能会忽略它。当然，你总是可以把东西包装在旧的'try {...} catch（ex）{...}' – csum

此外，控制台体验将取决于你的浏览器。（有些浏览器没有定义'console'对象，因此如果代码要进入生产环境，请注意'console.log（）'调用。） – csum

有一对夫妇在这里的问题可能会导致一个问题...

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>' 
);

来源

2016-01-13 18:45:57 AdamJeffers

请注意类名称上的单引号 – csum

对不起，我粘贴了（3）的错误代码。函数名称是正确的，我只是在我的文章中更改它 –

Ajax/Django .append（）发送POST请求

回答

相关问题