表单提交后使用ajax和页面视图审核


Form submission using ajax and page view moderation after the submission

此时我正在使用laravel。在这种情况下,我有一个通过使用ajax成功提交给控制器的表单。并且该控制器使其进入数据库。但问题是,当ajax在做它的工作时,整个页面在提交后保持不变,甚至数据库也被更新了。

现在我想要

我想给用户反馈,你的帖子已经成功提交到那里。或者我想进一步做的是,我想刷新从数据库中收集帖子的部分,因为可以从那里检索到这篇帖子。但是只使用ajax。

因此,不需要收集整个页面或刷新。

这是我的表单结构

`

    {{ Form::open(array('route' => array('questions.store'), 'class' => 'form-horizontal'  )) }}
    blah blah blaaa .......

    <script type="text/javascript">
                        $(".form-horizontal").submit(function(e){
                        $(this).unbind("submit")
                        $("#ask").attr("disabled", "disabled")

                        var that = $(this),
                            url = that.attr('action'),
                            type = that.attr('method'),
                            data = {};
                        that.find('[name]').each(function(index, value){
                                var that = $(this),
                                name = that.attr('name'),
                                value = that.val();
                                data[name] = value;
                        });
                        $.ajax({
                            url: url,
                            type: type,
                            data: data,
                            success: function(response){
                                console.log(response);
                            }
                        });
                        return false;
                    });
                    </script>

{{ Form::close() }}

`由于非常明显的是,帖子是通过一条路线更新的&控制器我想有另一个潜水和一个成功的消息在这个脚本后显示成功的张贴。我正在寻找一些专业的结构,使用与服务器端交互的最低需求,并为用户提供更好的页面查看体验。

非常感谢你在这项研究中对我的帮助。

我不确定我是否很理解你,但如果你想通知用户一个名为db update的ajax的结果,你需要有

  1. ajax保存数据库调用的路径-它应该指向一个执行数据库更新的方法
  2. db更新方法应该返回一些指示更新成功/失败的值(例如OK或FAIL)
  3. 调用该方法的唯一结果将只是以OK或FAIL为正文的纯文本页面
  4. 通过ajax获取结果并相应地通知用户(在表单提交按钮之后)

查看以下ajax调用本身的代码(在表单提交处理程序中),了解的含义

    var db_ajax_handler = "URL_TO_YOUR_SITE_AND_ROUTE";
    var $id = 1; //some id of post to update
    var $content = "blablabla"  //the cotent to update
        $.ajax({
                cache: false,
                timeout: 10000,
                type: 'POST',
                tryCount : 0,
                retryLimit : 3,
                url: db_ajax_handler,
                data: { content: $content, id: $id }, /* best to give a CSRF security token here as well */ 
                beforeSend:function(){
                },
                success:function(data, textStatus, xhr){
                     if(data == "OK") 
                     {
                        $('div.result').html('The new Question has been created');
                     }
                     else
                     {
                       $('div.result').html('Sorry, the new Question has not been created');  
                     }

                },
                error : function(xhr, textStatus, errorThrown ) {
                    if (textStatus == 'timeout') {
                        this.tryCount++;
                        if (this.tryCount <= this.retryLimit) {
                            //try again
                            $.ajax(this);
                            return;
                        }
                        return;
                    }
                    if (xhr.status == 500) {
                        alert("Error 500: "+xhr.status+": "+xhr.statusText);
                    } else {
                        alert("Error: "+xhr.status+": "+xhr.statusText);
                    }
                },
                complete : function(xhr, textStatus) {
                }
            });

EDIT:根据注释,在步骤2中(用AJAX调用的方法)替换

if($s) 
{ 
    return Redirect::route('questions.index') ->with('flash', 'The new Question has been created'); 
}

带有

return ($s) ? Response::make("OK") : Response::make("FAIL");

第2版:要将验证错误传递给ajax返回的结果,您不能使用

return Response::make("FAIL")
        ->withInput()
    ->withErrors($s->errors());

如您的GIST。相反,您必须修改建议的解决方案来处理JSON响应,而不是纯文本的OK/FAIL。这样,您就可以在响应中包含错误,并且仍然可以从AJAX调用中获益(不必刷新页面来从会话中检索$errors)。查看Laravel论坛上的这篇文章,了解一个有效的解决方案-你会明白这个想法,并能够修复你的代码。