让Ajax显示类中的搜索结果

我正在使用一个配方API，此时您会收到一个错误，因为我调用的是一些不存在的东西（例如，

$contentSearch

），我认为我可以通过使用Ajax来解决这个问题，无论我想用它来了解它是如何工作的

我正在使用Fork2WorkAPI并在Laravel5中工作

到目前为止，我已经四处寻找，但没有找到任何有效的。也许是因为我在调用一个函数，然后从那里得到结果

请随意搅乱我的整个代码，我想学习如何使它正确，而不是使它只是工作

我的问题是：如何使用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

---

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

查看

{!! 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>

---

我猜作为一种替代方法，您可以使用JSONP，但我对JSONP是新手，很难让它与food2fork的api一起工作。也许研究一下JSONP，看看它是否是您想要的。JQuery的JSONP示例：

您是否尝试编写javascript？如果是，请向我们展示您的代码。谢谢，这非常有帮助，并且按照我想要的方式工作！还有一个问题，如果可以的话。我希望结果是一个包含id的链接，这样用户就可以点击它想了解更多的配方。我把它添加到代码

$中。每个（data.recipes，function（key，value）{$（'result'）。append（$（'li>）。append（$（'.text（value.title））；

但是不知道如何应用

href

通过添加

$（'a'）。attr（'href'，'getRecipe/'+value.recipe\id）；

{!! 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>

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);
});