Question

我需要从MySQL获取数据（配方ID）以使API调用显示在我的视图中。我正试图在Laravel中使用AJAX，我不知道从哪里开始。如果有人能指出我正确的方向，那就太好了！

这是我正在使用的API。它有一个键但我也很困惑为什么它不包含在URL中，只是ID的参数： https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/ {ID} /信息

我的数据库是什么样的： The recipe ID need to concatenate with API

我的custom.js文件：

$(document).ready(function () {

    function recipeDatabase() {
        var $key = "**KEY**"
        var $recipeId = **need to get from database**;

        $.ajax({
            url:"https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/" + $recipeId +"/information?includeNutrition=true",
            type: "GET",
            async: false,
            data: {

            },
            success: function (data) {
                $(".display").html(data);
            }
        })
    }
recipeDatabase();
})

我的观点位于我的saved.blade.php文件中：

@extends('layouts.app')

@section('content')
    <h1>Saved Recipes</h1>
    <div class="display">

    </div>
@endsection

Answer 1

您正在接收数据并且必须连接，因此您可以使用函数手动处理它，以创建一些表格，如：

function createTable(data) {
    table = '';

    for (var i = 0; i < data.data.length; i++) {
        table += "<tr>";
        table += "<td>" + data.data[i].id + "</td>";
        table += "<td>" + data.data[i].recipe_id + "</td>";
        table += "<td>" + data.data[i].created_at + "</td>";
        table += "<td>" + data.data[i].updated_at + "</td>";
        table += "</tr>";
    }
    ;
    $('.display').html(table);
};

在你的成功ajax调用函数中：

success: function (data) {
                createTable(data);
                if (data.data.length == 0) {
                    $('.display').html(
                        "None data found"
                    );
                }
            },

嗯，这对我有用。只需执行一些console.log（）来查看如何调用属性，这应该可行。

Answer 2

由于您正在尝试获取所有配方ID，因此您必须创建一个控制器并让它将ID返回到视图

public function getRecipeId()
{
    $recipe_ids =  json_encode(Recipe::pluck('id')->toArray());

    return view('recipes', compact('recipe_ids'));
}

然后，您可以将元素设置为隐藏该值，例如：

<input type="hidden" value="{{ $recipe_ids }}" id="recipe_ids">

然后你可以用jquery检索那个元素的值并将它传递给你对该api的ajax调用：

var $key = "**KEY**";
$.each(JSON.parse($('#recipe_ids').val()), function(idx, $recipeId){


    $.ajax({
            url:"https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/" + $recipeId +"/information?includeNutrition=true",
            type: "GET",
            async: false,
            data: {

            },
            success: function (data) {
        //you have to find ways of displaying the response properly
                $(".display").html(data);
            }
        })
    });

另一种方法是设置对控制器的ajax调用以检索id：

public function getRecipeId()
{
    $recipe_ids =  Recipe::pluck('id')->toArray();
    return response()->json($recipe_ids);
}

之后还打电话给你的外部api，例如：

$.get('/yourapi/path').done(function ($recipeIds) {
    $.each(JSON.parse($recipeIds), function(idx, $recipeId){
    var $key = "**KEY**";
    $.ajax({
            url:"https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/" + $recipeId +"/information?includeNutrition=true",
            type: "GET",
            async: false,
            data: {

            },
            success: function (data) {
            //you have to find ways of displaying the response properly
                $(".display").html(data);
            }
        });
    });
});

我要做的最后一种方法就是使用Guzzle，你可以使用composer轻松安装guzzle，如果你有，那么你的getRecipeId控制器方法可能如下所示：

public function getRecipeId()
{
    $recipes = [];
    $client = GuzzleHttp\Client()
    Recipe::pluck('id')->each(function($recipeId, $key) use (&$recipes){
       recipes[] = $client->get("https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/" + $recipeId +"/information?includeNutrition=true")->getBody()->getContent();
    });
    return view('saved', compact('recipes'));
}

如果成功，那么当您在视图中访问$recipes时，您可以显示来自通话的数据。

PS：这些是用于演示/解释目的，所以你可能需要一点点调整。而对于那些ajax调用来说，处理失败的情况会很好，而使用Guzzle的情况则相同。

抱歉，我没有发布如何在视图中显示这个的原因是1.我不知道响应的格式，以及2.你应该探索laravel doc并尝试如何渲染它。您可以使用console.log（）和laravel使用dd（）查看调用的结果（以js为单位）;

我希望这会有所帮助。

使用Laravel中的AJAX从MySQL获取API调用数据

2 个答案: