使用Laravel表单的Ajax调用_Ajax_Laravel

使用Laravel表单的Ajax调用

ajax laravel

使用Laravel表单的Ajax调用,ajax,laravel,Ajax,Laravel,您好，有人能帮我一下吗？因为我想在我的laravel表单中使用ajax，每当我点击“创建帖子”按钮时，包含我所有帖子的表格都会隐藏，然后表单就会显示出来；当单击表单中的提交按钮时，表格就会显示出来，并在表格下方插入新数据，表单就会隐藏起来。我有一个代码，但它不工作控制器代码： public function store(Request $request) { //validate the data $this->validate($request, array(

您好，有人能帮我一下吗？因为我想在我的laravel表单中使用ajax，每当我点击“创建帖子”按钮时，包含我所有帖子的表格都会隐藏，然后表单就会显示出来；当单击表单中的提交按钮时，表格就会显示出来，并在表格下方插入新数据，表单就会隐藏起来。我有一个代码，但它不工作

控制器代码：

public function store(Request $request)
{
    //validate the data
    $this->validate($request, array(
        'title'       => 'required|max:255',
        'slug'        => 'required|alpha_dash|min:5|max:255|unique:posts,slug',
        'category_id' => 'required|integer',
        'body'        => 'required',
        'featured_image' => 'image|nullable|max:1999'
    ));

    //store in the database
    $post = new Post;

    $post->title = $request->title;
    $post->slug  = $request->slug;
    $post->category_id = $request->category_id;
    $post->body  = Purifier::clean($request->body);

    //Save Our Image
    if ($request->hasFile('featured_image')) {
        $image = $request->file('featured_image');
        $filename = time() . '.' . $image->getClientOriginalExtension();
        $location = public_path('images/'. $filename);
        Image::make($image)->resize(800, 400)->save($location);

        $post->image = $filename;
    } 
    $post->save();
    return response()->json($post);


    // Session::flash('success', 'The blog post was succesfully saved!');

    // //redirect to another page
    // return redirect()->route('posts.show', $post->id);

}

        {!! Form::open(['id' => 'form-post', 'method' => 'POST', 'route' => 'posts.store', 'data-parsley-validate' => '', 'files' => true]) !!}

        {{ csrf_field() }}

            <div class="form-group">
                <label class="control-label" for="title">Title:</label>
                <input type="text" name="title" class="form-control" data-error="Please enter title." required />
                <div class="help-block with-errors"></div>
            </div>

            <div class="form-group">
                <label class="control-label" for="title">Slug:</label>
                <input type="text" name="slug" class="form-control" data-error="Please enter title." required />
                <div class="help-block with-errors"></div>
            </div>


            {{ Form::label('category_id', 'Category') }}
            <select id="add-category" class="form-control" name="category_id">
                    @foreach($categories as $category)
                        <option value='{{ $category->id }}'>{{ $category->name }}</option>
                    @endforeach 
            </select>

           {{ Form::label('featured_image', 'Upload Featured Image:', ['class' => 'form-spacing-top']) }}
           {{ Form::file('featured_image',["id" => 'add-image', "class" => 'form-control-file']) }}


          {{ Form::label('body', 'Post Body:') }}
          {{ Form::textarea('body', null, array('id' => 'add-body', 'class' => 'form-control')) }}

          {{ Form::button('Create Post', array('id' => 'submit-post', 'class' => 'btn btn-success btn-lg btn-block', 'style' => 'margin-top: 20px;'))}}
        {!! Form::close() !!}

    </div>
</div>

    $(document).on('click', '.create-post', function() {
        $('.create-form').css('display','block');
        $('.posts-table').css('display','none');
    });

    $('#submit-post').click(function(e) {
        e.preventDefault();
        var action = $('#form-post').attr('route');
        var title = $("#form-post").find("input[name='title']").val();
        var slug = $("#form-post").find("input[name='slug']").val();
        var category_id = $("#add-category").val();
        var featured_image = $("#add-image").val();
        var body = $("#add-body").val();


        $.ajax({
            type : 'POST',
            url : "/addpost",
            headers: {
                'X-CSRF-TOKEN' : $('input[name="_token"]').val()
            },
            data : {
                title: title, 
                slug: slug, 
                category_id: category_id, 
                featured_image: featured_image, 
                body: body
            },
            success: function(data){
                $('.create-form').css('display','none');
                $('.posts-table').css('display','block');
                $('.table tbody').append("<tr id='" + data.id + "' class='item'><th>" + data.id + "</th><td>" + data.title + "</td><td>" + data.body + "</td><td>date</td><td><button class='show-modal btn btn-success' data-id='" + data.id + "' data-title='" + data.title + "' data-slug='" + data.slug + "' data-category='" + data.category_id + "' data-image='" + data.featured_image + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-eye-open'></span> Show</button><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-title='" + data.title + "' data-slug='" + data.slug + "' data-category='" + data.category_id + "' data-image='" + data.featured_image + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-edit'></span> Edit</button><button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-title='" + data.title + "' data-slug='" + data.slug + "' data-category='" + data.category_id + "' data-image='" + data.featured_image + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
                console.log(data); 
            }


        });

    });

路线：

Route::resource('/posts', 'PostController');
Route::post('/addpost', 'PostController@store');

表格代码：

public function store(Request $request)
{
    //validate the data
    $this->validate($request, array(
        'title'       => 'required|max:255',
        'slug'        => 'required|alpha_dash|min:5|max:255|unique:posts,slug',
        'category_id' => 'required|integer',
        'body'        => 'required',
        'featured_image' => 'image|nullable|max:1999'
    ));

    //store in the database
    $post = new Post;

    $post->title = $request->title;
    $post->slug  = $request->slug;
    $post->category_id = $request->category_id;
    $post->body  = Purifier::clean($request->body);

    //Save Our Image
    if ($request->hasFile('featured_image')) {
        $image = $request->file('featured_image');
        $filename = time() . '.' . $image->getClientOriginalExtension();
        $location = public_path('images/'. $filename);
        Image::make($image)->resize(800, 400)->save($location);

        $post->image = $filename;
    } 
    $post->save();
    return response()->json($post);


    // Session::flash('success', 'The blog post was succesfully saved!');

    // //redirect to another page
    // return redirect()->route('posts.show', $post->id);

}

        {!! Form::open(['id' => 'form-post', 'method' => 'POST', 'route' => 'posts.store', 'data-parsley-validate' => '', 'files' => true]) !!}

        {{ csrf_field() }}

            <div class="form-group">
                <label class="control-label" for="title">Title:</label>
                <input type="text" name="title" class="form-control" data-error="Please enter title." required />
                <div class="help-block with-errors"></div>
            </div>

            <div class="form-group">
                <label class="control-label" for="title">Slug:</label>
                <input type="text" name="slug" class="form-control" data-error="Please enter title." required />
                <div class="help-block with-errors"></div>
            </div>


            {{ Form::label('category_id', 'Category') }}
            <select id="add-category" class="form-control" name="category_id">
                    @foreach($categories as $category)
                        <option value='{{ $category->id }}'>{{ $category->name }}</option>
                    @endforeach 
            </select>

           {{ Form::label('featured_image', 'Upload Featured Image:', ['class' => 'form-spacing-top']) }}
           {{ Form::file('featured_image',["id" => 'add-image', "class" => 'form-control-file']) }}


          {{ Form::label('body', 'Post Body:') }}
          {{ Form::textarea('body', null, array('id' => 'add-body', 'class' => 'form-control')) }}

          {{ Form::button('Create Post', array('id' => 'submit-post', 'class' => 'btn btn-success btn-lg btn-block', 'style' => 'margin-top: 20px;'))}}
        {!! Form::close() !!}

    </div>
</div>

    $(document).on('click', '.create-post', function() {
        $('.create-form').css('display','block');
        $('.posts-table').css('display','none');
    });

    $('#submit-post').click(function(e) {
        e.preventDefault();
        var action = $('#form-post').attr('route');
        var title = $("#form-post").find("input[name='title']").val();
        var slug = $("#form-post").find("input[name='slug']").val();
        var category_id = $("#add-category").val();
        var featured_image = $("#add-image").val();
        var body = $("#add-body").val();


        $.ajax({
            type : 'POST',
            url : "/addpost",
            headers: {
                'X-CSRF-TOKEN' : $('input[name="_token"]').val()
            },
            data : {
                title: title, 
                slug: slug, 
                category_id: category_id, 
                featured_image: featured_image, 
                body: body
            },
            success: function(data){
                $('.create-form').css('display','none');
                $('.posts-table').css('display','block');
                $('.table tbody').append("<tr id='" + data.id + "' class='item'><th>" + data.id + "</th><td>" + data.title + "</td><td>" + data.body + "</td><td>date</td><td><button class='show-modal btn btn-success' data-id='" + data.id + "' data-title='" + data.title + "' data-slug='" + data.slug + "' data-category='" + data.category_id + "' data-image='" + data.featured_image + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-eye-open'></span> Show</button><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-title='" + data.title + "' data-slug='" + data.slug + "' data-category='" + data.category_id + "' data-image='" + data.featured_image + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-edit'></span> Edit</button><button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-title='" + data.title + "' data-slug='" + data.slug + "' data-category='" + data.category_id + "' data-image='" + data.featured_image + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
                console.log(data); 
            }


        });

    });

{！！Form:：open（['id'=>'Form post'，'method'=>'post'，'route'=>'posts.store'，'data parsley validate'=>''，'files'=>true]）
{{csrf_field（）}}
标题：
鼻涕虫：
{{Form:：label（'category_id'，'category'）}
@foreach（$categories作为$category）
{{$category->name}
@endforeach
{{Form:：label（'featured_image'，'Upload featured image:'，['class'=>'Form space top']]）}
{{Form:：file（'featured_image'，[“id”=>“add image'，“class”=>“Form control file']）}
{{Form:：label（'body'，'Post body:'）}
{{Form:：textarea（'body'，null，array（'id'=>'add body'，'class'=>'Form control'））}
{{Form:：button（'Create Post'，array（'id'=>'submit Post'，class'=>'btn btn success btn lg btn block'，'style'=>'margin top:20px；'））}
{！！Form:：close（）！！}

Ajax代码：

public function store(Request $request)
{
    //validate the data
    $this->validate($request, array(
        'title'       => 'required|max:255',
        'slug'        => 'required|alpha_dash|min:5|max:255|unique:posts,slug',
        'category_id' => 'required|integer',
        'body'        => 'required',
        'featured_image' => 'image|nullable|max:1999'
    ));

    //store in the database
    $post = new Post;

    $post->title = $request->title;
    $post->slug  = $request->slug;
    $post->category_id = $request->category_id;
    $post->body  = Purifier::clean($request->body);

    //Save Our Image
    if ($request->hasFile('featured_image')) {
        $image = $request->file('featured_image');
        $filename = time() . '.' . $image->getClientOriginalExtension();
        $location = public_path('images/'. $filename);
        Image::make($image)->resize(800, 400)->save($location);

        $post->image = $filename;
    } 
    $post->save();
    return response()->json($post);


    // Session::flash('success', 'The blog post was succesfully saved!');

    // //redirect to another page
    // return redirect()->route('posts.show', $post->id);

}

        {!! Form::open(['id' => 'form-post', 'method' => 'POST', 'route' => 'posts.store', 'data-parsley-validate' => '', 'files' => true]) !!}

        {{ csrf_field() }}

            <div class="form-group">
                <label class="control-label" for="title">Title:</label>
                <input type="text" name="title" class="form-control" data-error="Please enter title." required />
                <div class="help-block with-errors"></div>
            </div>

            <div class="form-group">
                <label class="control-label" for="title">Slug:</label>
                <input type="text" name="slug" class="form-control" data-error="Please enter title." required />
                <div class="help-block with-errors"></div>
            </div>


            {{ Form::label('category_id', 'Category') }}
            <select id="add-category" class="form-control" name="category_id">
                    @foreach($categories as $category)
                        <option value='{{ $category->id }}'>{{ $category->name }}</option>
                    @endforeach 
            </select>

           {{ Form::label('featured_image', 'Upload Featured Image:', ['class' => 'form-spacing-top']) }}
           {{ Form::file('featured_image',["id" => 'add-image', "class" => 'form-control-file']) }}


          {{ Form::label('body', 'Post Body:') }}
          {{ Form::textarea('body', null, array('id' => 'add-body', 'class' => 'form-control')) }}

          {{ Form::button('Create Post', array('id' => 'submit-post', 'class' => 'btn btn-success btn-lg btn-block', 'style' => 'margin-top: 20px;'))}}
        {!! Form::close() !!}

    </div>
</div>

    $(document).on('click', '.create-post', function() {
        $('.create-form').css('display','block');
        $('.posts-table').css('display','none');
    });

    $('#submit-post').click(function(e) {
        e.preventDefault();
        var action = $('#form-post').attr('route');
        var title = $("#form-post").find("input[name='title']").val();
        var slug = $("#form-post").find("input[name='slug']").val();
        var category_id = $("#add-category").val();
        var featured_image = $("#add-image").val();
        var body = $("#add-body").val();


        $.ajax({
            type : 'POST',
            url : "/addpost",
            headers: {
                'X-CSRF-TOKEN' : $('input[name="_token"]').val()
            },
            data : {
                title: title, 
                slug: slug, 
                category_id: category_id, 
                featured_image: featured_image, 
                body: body
            },
            success: function(data){
                $('.create-form').css('display','none');
                $('.posts-table').css('display','block');
                $('.table tbody').append("<tr id='" + data.id + "' class='item'><th>" + data.id + "</th><td>" + data.title + "</td><td>" + data.body + "</td><td>date</td><td><button class='show-modal btn btn-success' data-id='" + data.id + "' data-title='" + data.title + "' data-slug='" + data.slug + "' data-category='" + data.category_id + "' data-image='" + data.featured_image + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-eye-open'></span> Show</button><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-title='" + data.title + "' data-slug='" + data.slug + "' data-category='" + data.category_id + "' data-image='" + data.featured_image + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-edit'></span> Edit</button><button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-title='" + data.title + "' data-slug='" + data.slug + "' data-category='" + data.category_id + "' data-image='" + data.featured_image + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");
                console.log(data); 
            }


        });

    });

$（文档）。在（'click'，'create post'，function（）上{
$（'.create form'）.css（'display'，'block'）；
$（'.posts table'）.css（'display'，'none'）；
});
$（“#提交帖子”）。单击（函数（e）{
e、 预防默认值（）；
var action=$（'#form post'）.attr（'route'）；
var title=$（“#form post”）.find（“input[name='title']）.val（）；
var slug=$（“#form post”）.find（“input[name='slug']”）.val（）；
var category_id=$（“#添加类别”）.val（）；
var#u image=$（“#添加图像”）.val（）；
var body=$（“#添加body”）.val（）；
$.ajax({
键入：“POST”，
url:“/addpost”，
标题：{
'X-CSRF-TOKEN'：$（'input[name=“_TOKEN”]”）。val（）
},
数据：{
标题:标题,，
鼻涕虫：鼻涕虫，
类别id：类别id，
特色图片：特色图片，
身体：身体
},
成功：功能（数据）{
$（'.create form'）.css（'display'，'none'）；
$（'.posts table'）.css（'display'，'block'）；
$（'.table tbody'）.append（“+data.id+”“+data.title+”“+data.body+”日期显示编辑删除”）；
控制台日志（数据）；
}
});
});

关于错误的信息不够。在控制器中尝试

dd（）

，并在[F12->Network]中进行检查

由于您使用ajax发送请求，所以不需要在表单中定义选项（操作、路由）。删除它。

哪里有问题？哪个部分不工作？什么错误？这是我的错误。加载资源失败：服务器响应状态为422（不可处理实体）。而且，当我点击提交按钮时，没有发生任何事情，很可能是验证错误。。添加一个

返回“faield”语句是否正确返回。检查您的请求和数据库字段。。可能是由于字段db的名称与模型字段名称不匹配而导致的错误当我尝试在表单中放入数据而不在其上放置图像时，我的数据将保存在数据库中，并且它正在工作。我想我这里的问题是我的图像上传字段。