如何使用AJAX渲染部分图像?Laravel 5.2 [英] How to render partial using AJAX? Laravel 5.2

问题描述

我处于一种情况，我想列出有关存储在MYSQL数据库中的停车位的信息.我正在使用AJAX来调用API端点(/api/spots)并返回斑点列表.我已经使用刀片语法为信息(partials/Spot.blade.php)的布局创建了局部视图.

I am in a situation where I want to list information about parking spots that are stored in a MYSQL database. I am using AJAX to make calls to API endpoint (/api/spots) and return a list of spots. I have created a partial view using blade syntax for the layout of the information(partials/Spot.blade.php).

我想知道是否有一种方法可以创建一个控制器方法，该方法将返回部分视图并将其呈现到页面的一部分，而无需返回服务器.是否可以使用我的partials/Spot.blade.php?也许我应该创建一个方法来将所有HTML中的数据作为字符串返回，并获取JS将其添加到DOM中?

I am wondering if there is a way to create a controller method that will return a partial view and render it to part of the page, without making a trip back to the server. Is this possible using my partials/Spot.blade.php? Maybe I should create a method to return all the HTML the data in it as a string and the get JS to add that into the DOM?

我目前的操作方式是在页面最初加载时呈现partials/Spot.blade.php，并使用CSS从屏幕上将其删除.然后，在对服务器进行AJAX调用之后，我在这个隐藏的部分中抓取HTML，并使用REGEX将数据放置在布局中.不过，这似乎有点脏.只是想知道其他人如何解决了这个问题.

The way I currently doing it is rendering the partials/Spot.blade.php when the page is initially loaded, and removing it from the screen using CSS. Then after AJAX call to server, I am grabbing the HTML in this hidden partial and using REGEX to place the data in the layout. This seems a little dirty though. Just wondering how other people have solved this problem.

您的反馈意见将不胜感激，

Your feedback would be greatly appreciated,

马特

推荐答案

这很简单(:

看看这个例子，然后进行自己的修改:

Look at this example and make Your own modifications:

控制器:

class StatisticsController extends Controller
{

    public function index()
    {
        return view('statistics.index');
    }


    public function filter(Request $request, $fields) {
        // some calculation here...
        return view('statistics.response', compact('stats')); // will render statistics/response.blade.php file with passing results of filter
    }
}

观看次数:

具有日期过滤功能的页面statistics/index.blade.php

page with date filtering statistics/index.blade.php

@extends('layouts.billing')

@section('title') Statistics @stop

@section('js_footer')
    <script>
        function doGet(url, params) {
            params = params || {};

            $.get(url, params, function(response) { // requesting url which in form
                $('#response').html(response); // getting response and pushing to element with id #response
            });
        }

        $(function() {
            doGet('/statistics/filter'); // show all

            $('form').submit(function(e) { // catching form submit
                e.preventDefault(); // preventing usual submit
                doGet('/statistics/filter', $(this).serializeArray()); // calling function above with passing inputs from form
            });
        });
    </script>
@stop

@section('content')
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3>Statistics</h3>
                </div>
                <div class="panel-body">
                    <form>
                        <label>Time</label>
                        <div class="input-group">
                            <input type="text" name="time_from" value="{{ date('Y-m').'-01 00:00:00' }}"  class="form-control"  autocomplete="off">
                            <input type="text" name="time_to" value="{{ date('Y-m-d H:i:s', time()) }}"  class="form-control"  autocomplete="off">
                        </div>

                        <button type="submit" class="btn btn-sm btn-primary pull-right">
                          <i class="fa fa-search"></i> Show
                        </button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div id="response"> HERE WILL BE INJECTED RESULT OF FILTERING </div>
        </div>
    </div>
@stop

以及用于呈现过滤结果的部分信息:

and partial for rendering result of filtering:

statistics/response.blade.php

statistics/response.blade.php

<div class="table-responsive">
    <table class="table table-striped table-borderless text-center">
        <thead>
            <th>ID</th>
            <th>Partner</th>
            <th>Tariffs</th>
            <th>Total</th>
        </thead>
        <tbody>
        @foreach($stats AS $stat)
            some data here
        @endforeach
        </tbody>
    </table>
  </div>

这篇关于如何使用AJAX渲染部分图像?Laravel 5.2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！