獲取Ajax以顯示來自類的搜索結果

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/