Javascript 使用 AJAX 提交表单 laravel

Submit form laravel using AJAX

提问by Zobo

I am trying to add comment using AJAX technology but I have an error: Failed to load resource: http://localhost:8888/blog/public/comment/add the server responded with a status of 500 (Internal Server Error)Here is my code: View:

我正在尝试使用 AJAX 技术添加评论，但出现错误： Failed to load resource: http://localhost:8888/blog/public/comment/add the server responded with a status of 500 (Internal Server Error)这是我的代码：查看：

{{ Form::open(array('method'=>'post','class'=> 'col-md-6','url' => '/comment/add', 'id'=>'comment')) }}
                        <input type="hidden" name="post_id" value="{{$id}}">
                        <div class="row">
                            <div class="inner col-xs-12 col-sm-12 col-md-11 form-group">
                                {{Form::label('name', 'Imi?')}}
                                {{Form::text('username', null, array('class'=>'form-control', 'id'=>'name', 'name'=>'name'))}}
                            </div>
                            <div class="inner col-xs-12 col-sm-12 col-md-12 form-group">
                                {{Form::label('message', 'Wiadomo??')}}
                                {{Form::textarea('message', null, array('class'=>'form-control', 'id'=>'message', 'name'=>'message', 'rows'=>'5'))}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-md-12 submit form-group">
                                {{Form::submit('Wy?lij', array('name'=>'submit', 'class'=>'btn btn-orange'))}}
                            </div>
                        </div>

                    {{ Form::close() }}

Controller:

控制器：

public function addComment()
{
        $this->layout = null;
        //check if its our form
        if(Request::ajax()){
            $name = Input::get( 'name' );
            $content = Input::get( 'message' );

            $comment = new Comment();
            $comment->author =  $name;
            $comment->comment_content = $content;
            $comment->save();

            $postComment = new CommentPost();
            $postComment->post_id = Input::get('post_id');
            $postComment->comment_id = Comment::max('id');
            $postComment->save();

            $response = array(
                'status' => 'success',
                'msg' => 'Setting created successfully',
            );
            return 'yea';
        }else{
            return 'no';
        }
}

AJAX:

阿贾克斯：

    jQuery( document ).ready( function( $ ) {

    $( '#comment' ).on( 'submit', function(e) {
        e.preventDefault();

        var name = $(this).find('input[name=name]').val();

        $.ajax({
            type: "POST",
            url: host+'/comment/add',
        }).done(function( msg ) {
            alert( msg );
        });

    });
});

And the last one routes:

最后一条路线：

Route::post('comment/add', 'CommentController@addComment');

Anyone have an idea where is the problem and why I can't submit my form?

任何人都知道问题出在哪里以及为什么我无法提交表单？

回答by baao

You are not posting any data,

您没有发布任何数据，

    $.ajax({
        type: "POST",
        url: host+'/comment/add',
    }).done(function( msg ) {
        alert( msg );
    });

The error you are getting is that the columns in DB cannot be null.

您得到的错误是 DB 中的列不能为空。

Try to change your ajax call to this:

尝试将您的 ajax 调用更改为：

    $.ajax({
        type: "POST",
        url: host+'/comment/add',
        data: { name:name, message:message, post_id:postid }, 
        success: function( msg ) {
            alert( msg );
        }
    });

Change this

改变这个

var name = $(this).find('input[name=name]').val();

to

到

var name = $('#name').val();

and fetch the message and the post id:

并获取消息和帖子 ID：

var message = $('#message').val();
var postid = $('#post_id').val();

---

---

Complete ajax block:

完整的ajax块：

   $('#comment').on('submit', function(e) {
       e.preventDefault(); 
       var name = $('#name').val();
       var message = $('#message').val();
       var postid = $('#post_id').val();
       $.ajax({
           type: "POST",
           url: host+'/comment/add',
           data: {name:name, message:message, post_id:postid}
           success: function( msg ) {
               alert( msg );
           }
       });
   });

And finally, add an ID to the hidden field:

最后，在隐藏字段中添加一个 ID：

<input type="hidden" name="post_id" id="post_id" value="{{$id}}">

---

---

Send data back from Laravel controller, eg.

从 Laravel 控制器发回数据，例如。

    // ........

        $response = array(
            'status' => 'success',
            'msg' => 'Setting created successfully',
        );
        return Response::json($response);  // <<<<<<<<< see this line
    }else{
        return 'no';
    }
}

This will send the data in your response back to your ajax request.

这会将您响应中的数据发送回您的 ajax 请求。

Then, alter your ajax success function:

然后，更改您的 ajax 成功函数：

 // .......
 success: function( msg ) {
     $("body").append("<div>"+msg+"</div>");
 }

 // ..........

You will now see that a new div was created in your <body>including the created response. If you want to show the newly created post, just create it as the ajax response and append it to any element in your page.

您现在将看到在<body>包含创建的响应中创建了一个新 div 。如果要显示新创建的帖子，只需将其创建为 ajax 响应并将其附加到页面中的任何元素。

回答by aiswarya

Just modifying the ajax block of baao's answer. You can pass data as serialized.

只是修改baao's answer的ajax块。您可以将数据作为序列化传递。

$('#comment').on('submit', function(e) {
    e.preventDefault(); 
    $.ajax({
        type: "POST",
        url: host+'/comment/add',
        data: $(this).serialize(),
        success: function(msg) {
        alert(msg);
        }
    });
});

All the field values of the form can be passed using the serialize()function.

可以使用该serialize()函数传递表单的所有字段值。