清除刀片 laravel 以呈现新的响应 ajax

Question

我正在尝试使用相同的刀片从 ajax 返回响应。

在我的第一个控制器函数中，我返回一个带有数据的视图：

public function index()
{
    $data = (object) array(
        'title' => trans('web.blog_title'),
        'description' => trans('web.blog_header_info'),
    );
    
    $posts = \DB::table('blogs')->paginate(3);
    
    return view('web.blog')->with('data', $data)->with('posts', $posts);
}

但现在我正在使用 ajax 进行搜索，并且我想使用相同的刀片模板进行响应。

我应该呈现我的响应的第二个函数是：

public function getLocalNews($restaurant_id) {
    $data = (object) array(
        'title' => trans('web.blog_title'),
        'description' => trans('web.blog_header_info'),
    );
    
    $news = Blog::query()->where('restaurant_id', '=', $restaurant_id)->paginate(3);
    
    return view('web.blog')->with('data', $data)->with('posts', $news);
}

但它什么也没做......

ajax：

$("#submit_btn_blog_res").on("click", function(e){
    e.preventDefault();
            
    var form = $('#searchRestaurant');
    
    $(this).find('input').removeClass('is-invalid');
    $(this).find('.error').html('');
    
    $.ajax({
        url: "blog/getLocalNews/" + $(".suggest-element").attr('id'),
        data: form.serializeArray(),
        type: 'GET',
        dataType: form.data('type'),
        success: function(data){
            console.log(data);
            $(".post-article").remove();
        },
        error: function(jqXHR){
            var response = JSON.parse(jqXHR.responseText);
    
            if (response.errors.name) {
                $(form).find('input[name="name"]').addClass('is-invalid');
                $(form).find('.name-error').html(response.errors.name);
            } else if (response.errors.email) {
                $(form).find('input[name="email"]').addClass('is-invalid');
                $(form).find('.email-error').html(response.errors.email);
            } else if (response.errors.phone) {
                $(form).find('input[name="phone"]').addClass('is-invalid');
                $(form).find('.phone-error').html(response.errors.phone);
            } else if (response.errors.comments) {
                $(form).find('input[name="comments"]').addClass('is-invalid');
                $(form).find('.comments-error').html(response.errors.comments);
            } else if (response.errors.gRecaptchaResponse) {
                $(form).find('input[name="g-recaptcha-response"]').addClass('is-invalid');
                $(form).find('.g-recaptcha-response-error').html(response.errors.gRecaptchaResponse);
            }
        }
    });
}); //submit search form restaurant

Answer 1

您应该使用content-type 或application/json 传递您的回复。希望 laravel 有一个函数 response() 可以为你做这件事。

public function getLocalNews($restaurant_id){
        $data = (object) array(
            'title' => trans('web.blog_title'),
            'description' => trans('web.blog_header_info'),
        );

        $news = Blog::query()->where('restaurant_id', '=', $restaurant_id)->get();

        $response_data = ['data'=>$data, 'posts'=>$news];
        return response()->json($response_data, 200);
    }

如laravel helpers functions doc 中所说，response() 的第一个参数接收要包含在正文中的数据。如果传一个数组，会转成json，第二个参数是响应的http状态码。

注意：如果您想通过分页发送结果。你可以使用laravel api resource。

更新：使用您的 ajax 将新接收到的数据添加到您的 html。

success: function(response){
    console.log(response);
    $('#desired-element-for-data').html('');
    $.each(response.data, function(item){
        html1 += '<p>item</p>';
    });

    $('#desired-element-for-posts').html('');
    $.each(response.posts, function(item){
        html2 += '<p>item</p>';
    });

    $('#desired-element-for-data').html(html1);
    $('#desired-element-for-posts').html(html2);

    $(".post-article").remove();
},