Question

我正在使用配方API，当你收到错误，因为我正在呼唤一些不存在的东西（例如$contentSearch），我想我可以使用Ajax解决这个问题，无论我想用它来学习它是如何工作的。

我使用fork2fork API并在Laravel 5中工作。

到目前为止，我一直环顾四周，但找不到任何可行的东西。也许是因为我要求一个功能并从那里得到结果？

随意搞乱我的整个代码，我想学习如何使它正确而不是让它正常工作！

并明确提出问题：如何使用Ajax显示搜索结果？

这是html：

@extends('app')

@section('content')

{!! Form::open(['url' => 'searchRecipe']) !!}
    {!! Form::text('search') !!}
    {!! Form::submit('Search recipe') !!}
{!! Form::close() !!}

<p>if you lucky and have more than one thing in your fridge, separate them with a ',' and nothing else. As in no space.</p>

<div class="text-info">

    <ul class="list-unstyled">
        @foreach($contentSearch->recipes as $recipe)

            <li><a href="/getRecipe/{{$recipe->recipe_id}}">{{$recipe->title}}</a></li>

        @endforeach
    </ul>
</div>

@stop

如果你按下提交按钮，这是被调用的函数：

    public function getSearch() {

    $apiKey = "thats a secret i never tell";

    $search = Request::get('search');

    // insert search and API key in URL
    $apiUrl = "http://food2fork.com/api/search?key=" . $apiKey
        . "&q=". $search ;


    // get the content of the file
    //header('Content-Type: application/json');
    $contentSearch = json_decode(file_get_contents($apiUrl));


    return view('index', compact('contentSearch'));
}

Answer 1

我不确定我是否完全理解这个问题，但我希望这会有所帮助。

查看

{!! Form::open(['url' => 'recipes']) !!} {!! Form::text('search', null, ['id' => 'search']) !!} {!! Form::submit('Search recipe') !!} {!! Form::close() !!} <ul id="result"></ul> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <script> $(document).ready(function(){ // get the form submit event $('form').submit(function(event){ // stop the form from submitting event.preventDefault(); // the form object var form = $(this); // perform ajax post request $.post( form.attr('action'), // this will go to form url form.serialize(), // grab the form data function(data) { // do something with the response console.log(data); // see response in the console // add title of recipes in a list $.each(data.recipes, function(key, value) { $('#result').append($('<li></li>').text(value.title)); }); } ); }); }); </script>

routes.php 仅用于演示，您可以将其移至您的控制器

Route::post('recipes', function() { $apiKey = "yourAPIkey"; $search = \Request::get('search'); // insert search and API key in URL $apiUrl = "http://food2fork.com/api/search?key=" . $apiKey . "&q=". $search ; // get the content of the file //header('Content-Type: application/json'); $contentSearch = json_decode(file_get_contents($apiUrl)); return response()->json($contentSearch); });

我猜你可以选择使用JSONP作为替代方案，但我是JSONP的新手，并努力让它与food2fork的api一起工作。也许研究JSONP并看看它是否是你想要的。使用JQuery的JSONP示例：https://learn.jquery.com/ajax/working-with-jsonp/

让Ajax从类中显示搜索结果

1 个答案: