Question

我正在创建一个网页，用户提交一个表单，然后在Django中创建一个对象（使用Ajax，因此页面不会刷新）。当我在成功的响应部分中不包含.append（）方法时，这很好。

然而，当我尝试在成功请求之后添加新的语义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>

Answer 1

这里有几个可能导致问题的问题......

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

Answer 2

您是否在控制台中收到任何错误？

页面上不应该有两个具有相同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>\
");

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

2 个答案: