Question

我正在尝试创建一个表单，将内容添加到我的数据库，然后显示它而不刷新页面（使用laravel 4.2）。但是，我无法弄清楚到底是怎么做到的。当我提交表单时，我会看到一个空白页面，但数据存储在数据库中。

这是我的路线：

Route::get('/question/{id}', function($id){
$question=Question::getQuestion($id); //a model that retreives data from db
$answer=Question::getAnswers($id); //a model that retreives data from db
return View::make('question')->with('question',$question)->with('answer',$answer);
});

Route::post('/question/{id}','QuestionController@post_answer');

我的控制器：

public static function post_answer()
    {
        $data=Input::all();

        return Question::postAnswer($data);
    }

表格：

<form class="post_ans" action="{{'/question/'.$question[0]->question_id}}"         method="post">
 <textarea name="answer_content" rows="12"></textarea>
 <input type="hidden" name="this_question" value="{{$question[0]-     >question_id}}">
 <input type="submit" id="post_answer" value="Добави">

 </form>

我的Jquery脚本：

$(document).ready(function(){    
    $('form.post_ans').on('submit',function(event){
        post_answer();
    });
});

function post_answer()
{
    var data={
        to_question:$('#this_question').val(),
        content:$('#answer_content').val()
    };
    console.log(data);
    var url= window.location.href;
    console.log(url);
    $.ajax({
        type:"POST",
        url:url,
        data:data
    }).done(function(){
        console.log("success!");
    }).fail(function(){
        console.log("Fail");
    }).always(function(){
        console.log("always");
    });
}

无论我是否使用preventDefault（），我都会在控制台中得到它：

Object {to_question: undefined, content: "<p>Teeeeeest</p>"}
http://laravel.dev/question/11
POST http://laravel.dev/question/11 500 (Internal Server Error)
    m.ajaxTransport.send
    m.extend.ajax
    post_answer
    (anonymous function)
    m.event.dispatch
    m.event.add.r.handle

Fail
always

我希望我的表单将数据存储在数据库中，然后立即显示它而不刷新页面。有什么建议吗？

Answer 1

这里的问题是即使submit事件被触发，在它之后页面仍然刷新，因为＆＃34;正常＆＃34;提交发生。您可以使用preventDefault()

停止实际发生的默认提交

$('form.post_ans').on('submit',function(event){
    event.preventDefault();
    post_answer();
});

Answer 2

因为您将表单提交到网址window.location.href;，但我认为您需要将其提交到public static function post_answer()，我不知道您为什么要将参数附加到/question/1之类的路线，可以作为POST参数传递

所以你需要更改ajax的URL，

更改表格定义

<form class="post_ans" action="{{ URL::to('/question') }}"  method="post">

OR

使用更清晰的laravel表单构建器，

Form::open(array('method' => 'POST', 'class' => 'post_ans','action' => 'QuestionController@postAnswer'))

OR

{{ Form::open(array('method' => 'POST', 'class' => 'post_ans','url' => 'question')) }}

更改路线

Route::post('question','QuestionController@postAnswer');

更改JAVASCRIPT

$(document).ready(function(){    
    $('form.post_ans').on('submit',function(event){
        post_answer($(this).attr('action')); // pass the form action
        return false;
    });
});

function post_answer(action)
{
    var data={
         to_question:$('#this_question').val(),
         content:$('#answer_content').val()
    };
    console.log(data);
    var url= action;   // set the url to form action
    console.log(url);
    $.ajax({
        type:"POST",
        url:url,
        data:data
    }).done(function(){
        console.log("success!");
    }).fail(function(){
        console.log("Fail");
    }).always(function(){
        console.log("always");
   });
}

控制器功能

public function postAnswer()
{
    $data=Input::all();

    return Question::postAnswer($data);
}

如何在laravel中发送ajax请求

2 个答案: