在用laravel 4提交表格之前防止重新加载

Question

我一直试图在使用laravel4提交表单时阻止页面重新加载。

我不希望每次提交表单时出现问题都会重新加载页面。 这是js文件

$(document).ready(function() {
    $('#contact_form').on('submit',function(e){

        e.preventDefault();

        var that = $(this);

        var url = that.attr('action');

        var action = that.attr('method');

        $.post(url,action,that.serializeArray())
        .done(function (data,text,jqhr) {

                console.log('data');
            })
        .fail(function(jqxhr){
            alert(jqxhr.responseText)
        })

        .always(function () {
            that.find('button').text('Send Message');
        })
    });

});
//end of document ready function

ContactController.php：

    <?php
class ContactController extends BaseController{



       public function getIndex (){

        return View::make('Contact.contact');
        }

        public function postContact(){

        $validator = Validator::make(Input::all(), array(
            'name'      =>'required|min:2',
            'email'     =>'required|email',
            'sujet'     =>'required',
            'telephone' =>'required|phone:US,CA',
            'message'   =>'required'
        ));

            if($validator->passes()){

                $contact = new Contact();

                $contact -> nom         = Input::get('name');
                $contact -> email       = Input::get('email');
                $contact -> sujet       = Input::get('sujet');
                $contact -> telephone   = Input::get('telephone');
                $contact -> message     = Input::get('message');

                if(Request::ajax){

                    $contact->save();
                    return Redirect::route('contact')
                        ->with('success','Votre message a ete envoyee, on vous contactera!');
                }

                else{
                    return View::make('Contact.contact');
                }

            }else{

                return Redirect::route('contact')->withErrors($validator)->withInput();
            }

        }
    }

路线：

Route::group(array('before'=> 'csfr'),function(){

        Route::post('Contact/send-message', array(

            'as' => 'postContact',

            'uses' => 'ContactController@postContact'
        ));

    });

Answer 1

将onSubmit事件处理程序更改为提交按钮上的onClick处理程序。当数据发布到服务器时会触发onSubmit事件，因此为时已晚，无法阻止重新加载。

 $('#submit_button').on('click',function(e){

        e.preventDefault();

        var that = $('#contact_form');

        var url = that.attr('action');

        var action = that.attr('method');

        $.post(url,action,that.serializeArray())
        .done(function (data,text,jqhr) {

                console.log('data');
            })
        .fail(function(jqxhr){
            alert(jqxhr.responseText)
        })

        .always(function () {
            that.find('button').text('Send Message');
        })
    });

});

Answer 2

初始问题

除了拨打$.post之外，一切看起来都不错。表单数据作为第二个参数传入，而不是第三个参数。 $.post方法的签名是：

jQuery.post( url [, data ] [, success ] [, dataType ] )

所以，如果你将电话改为：

，你应该没事

$.post(url, that.serializeArray())

表格行动

如果您想使用表单上定义的操作，则需要切换到使用$.ajax方法。 $.get和$.post方法是这些操作的快捷方式，因此无法更改操作。使用$.ajax，您可以完全控制。在这种情况下，你会看到类似的东西：

$.ajax(url, {
    type: action,
    data: that.serializeArray()
}).done(function (data,text,jqhr) {
    console.log('data');
}).fail(function(jqxhr){
    alert(jqxhr.responseText)
}).always(function () {
    that.find('button').text('Send Message');
});

注释

• 表单提交事件应该可以正常工作。这是一个可取消的事件。
• $.serialize和$.serializeArray都应该有效。