如何通过API调用在URL中加载玩家名称 - Laravel 5

Question

我想在我的网址中显示玩家Gamer-tag。我遇到的麻烦是我不知道如何在搜索框中请求游戏玩家标签，因为我正在通过API调用请求游戏玩家标签。

现在这就是我称之为路线的方式：

    Route::post('/Player/Stats', [
        'as' => 'player-stats',
        'uses' => 'StatsController@index'
    ]);

/ ---------------------------------------------- ---------------------------

// this is how I set up my search box for home page
<form action="{{ route('player-stats') }}" method="POST">
      {!! csrf_field() !!}
      <input type="text" name="gamertag" id="gamertag" class="form-control" title="Gamer-tag" style="width:40%" required>
      <button class="btn btn-lg btn-primary" type="submit">Find</button>
 </form>

它的外观如下：

我希望它是这样的：

Route::post('/Player/Stats/{gamertag}', [
   'as' => 'player-stats',
   'uses' => 'StatsController@index'
]);

我无法在表单中执行此操作：

  

action =＆＃34; {{route（＆＃39; player-stats＆＃39;，$ gamertag}}＆＃34;

因为$ gamertag没有存储在任何地方

Answer 1

这里的麻烦与PHP无关，而与JavaScript有关。

您需要使用history API提供的HTML5。这将允许您从历史记录中推送/弹出states。这最终意味着您将能够修改URL地址。

让我们来看看它带来了什么。我们假设您通过从搜索输入上的表单提交中发出的ajax请求从控制器返回JSON对象。

public function MyController(Request $request){
    $model = Models::where('key', $request->get('value'))->first();
    return response()->json($model);
}

当然，关联的Ajax和jQuery。

$('form').on('submit', function(e){
    e.preventDefault();
    $.ajax({
         //props
         dataType: 'json'
    }).done(function(response){
        //magic
        history.pushState(null, null, 'Player/stats/'+response.gamertag);
    });
});

history.pushState将在此处执行的操作是修改URL并根据pushState函数的第3个参数进行更改。 注意您无法更改域名，因此仅在FQDN之后操作URL，例如http://example.com。但是，您需要在FQDN之后提供full path作为第三个参数。

.pushState()的第一个参数是data。然后，您可以将ajax response object存储在此状态中。当用户在浏览器中点击back时，popState事件会触发，从而允许我们访问该状态。我们来看看。

$(window).on('popState', function(e){
    //e.state contains the data, otherwise e.originalEvent.state will.
});

最常见的用例是将ajax response存储在状态内，因此在浏览器中单击后，您只需重新执行在.done()响应中执行的任何操作。我们来看看

var $results_container = $('.results-container');
function showResults(response){
    //parsing and logic here to handle the ajax response and "Show Results"

    $results_container.empty();
    $.each(response.row, function(i, row){
        $results_container.append(row);
    });
}

现在在ajax .done()函数内部，您可以将响应传递给我们的函数。

.done(function(response){
    showResults(response);
});

但是，我们现在也可以在popState()函数中执行相同操作。

$(window).on('popstate', function(e){
    showResults(e.state);

    //or maybe it's showResults(e.originalEvent.state)
    //honestly can't remember
});

希望这能让你朝着正确的方向前进。