Question

我正在使用ajax调用来POST一个表单来创建一个对象。在我的视图中创建对象后，我使用对象实例渲染模板， footemplate 说。

我希望发生的是将 footemplate 插入到我当前的页面中，即包含该表单的页面。特别是我想将它添加到id =＆＃39; result-container＆＃39;的div中。但是，当我返回渲染模板时，它实际上会自动加载页面。

视图

def object_create(request):
    ....
    return render(request, template, template_context)

AJAX

$('#object-create').on('submit', function(event){
    event.preventDefault();

    var myform = document.getElementById('object-create');
    var fd = new FormData(myform );
    var post_url = $(this).attr('action');

    $.ajax({
        url : post_url,
        data : fd,
        cache: false,
        processData: false,
        contentType: false,
        type : "POST",
        success : function(data) {
            $('#result-container').html(data)
        },
        error : function() {
            alert("error")
        }
    });
});

如何仅将html作为文本返回，而不是实际生成页面？

编辑：

看来问题是由我正在使用的弹出式结构创建的。也就是说我提交的表单位于我使用AJAX GET请求填充的弹出窗口中。

HTML

<div class='popup-overlay' style='display:none;'></div>
<div class='popup-outer' style='display:none;'>
    <a id='popup-close'>X</a>
    <p>
        <div class='popup-inner'>
        </div>
    </p>
</div>

填充并显示弹出窗口的AJAX / jquery函数

function openpopup(data, url) {
    var data_ = data;
    var url_ = url;
    $.ajax({
        url: url_,
        type: 'GET',
        data: data_,
        success: function(data) {
            $('.popup-inner').html(data);
        }
    });
    $('.popup-overlay').fadeIn('fast');
    $('.popup-outer').show();
};

当我将表单加载到弹出窗口所属的原始页面时，没有问题，一切都按预期工作。我猜测线上发生了什么（或者没有发生）？

$('.popup-inner').html(data);

我不明白这里可能会出现什么问题。有什么想法吗？

Answer 1

也许您应该从模板中移除{％extends''％}？

在ajax POST后返回html

1 个答案: