成功回调后重新加载表单

Question

我有一个带有多个文件输入（图像）的配置文件编辑表单，我想在成功回调时刷新表单并获取/显示最新更新的数据（图像）回到同一表单，而无需刷新整个页面。

$("#mylisting_form").ajaxForm({
        dataType: "json",
        beforeSend: function() {
            var btn = $('#btn_mylisting');
            btn.button('loading')
    },
    uploadProgress: function(event, position, total, percentComplete) {
        console.log(percentComplete); // Show the completed percent 
    },
    success: function(response) {

        if(response.success == 'success'){
            $('#form').reset();
            $('#successful').html('<b>Edited saved!</b>').show();

        }else{
            $('[id$="_error"]').html('');
            $.each(response.error, function(key, value){
                if(value){
                    $('#' + key + '_error').html(value);
                }
            });
        }
        $('#btn_mylisting').button('reset');
    },
    error: function(xhr, textStatus, errorThrown) {
        console.log(errorThrown );
    }

}); 

//form
<div id="form">
                <form class="form-horizontal" role="form" method="post" id="mylisting_form" enctype="multipart/form-data" action="inc/callback/request_update_item.php">

                    <input type="hidden" name="user_id" value="<?php echo $data->user_id ?>">
                    <input type="hidden" name="list_id" value="<?php echo $list_id ?>">

                    //uploaded image will show here
                    <div id="show_images"><? php fetch image goes here ?></div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="photo">Photo</label>
                        <div class="col-sm-7"><input type="file" name="files[]" class="multi" accept="gif|jpg" maxlength="3" /><p class="help-block">Up to 3 photos max.</p></div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="publish"></label>
                        <div class="col-sm-7"><input type="checkbox" name="publish" <?php echo $checked ?>> Publish</div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label" for="email">Name</label>
                        <div class="col-sm-7"><input type="text" class="form-control" id="name" name="name" value="<?php echo $list->name ?>"><span class="error" id="name_error"></span></div>
                    </div>

                    <hr />
                    <div class="form-group">
                        <div class="col-sm-offset-4 col-sm-7"><button class="btn btn-success" id="btn_mylisting" type="submit" data-loading-text="Loading...">Save</button></div>
                    </div>
                </form>
</div>

Ajax 请求 (request_update_item.php) 仅回调成功或错误状态，它不会让 post 数据返回响应，我想简单，这就是我问的原因是可能只刷新整个 @987654322 @ 或 form 仅用于特定项目以显示从数据库获取的更新信息。

感谢您的建议！

Answer 1

可以先设置html再显示：

$('#successful').html('<b>Edited saved!</b>').show();

Answer 2

你能不能使用像 Mustache 或 Handlebars 这样的模板 javascript 框架来动态重建你的表单？

你的形象到底是关于什么的？

Answer 3

我不确定您在寻找什么，但是...

$('#form').reset();