Ajax 请求从数据库中获取数据并返回答案

【问题标题】：Ajax request fetching data from database and return itAjax 请求从数据库中获取数据并返回
【发布时间】：2019-12-19 19:47:01
【问题描述】：

我正在尝试发出一个简单的 Ajax 请求，该请求在控制器中可以从数据库中获取数据并返回。现在我在视图上有这个代码：

$(".btn-submit").click(function(e) {
    e.preventDefault();
    var name = $("input[name=name]").val();
    var password = $("input[name=password]").val();
    var email = $("input[name=email]").val();

    $.ajax({
        type: 'POST',
        url: '/ajaxRequest',
        data: JSON.stringify({
            name: name,
            password: password,
            email: email
        }),
        dataType: "json",
        success: function(data) {
            console.log(data.lots);
            alert(data.success);
            $("#id").append(data.lots);
        }
    });
});

控制器上的这段代码：

public function ajaxRequestPost(Request $request)
{
    $input = $request->all();
    $result = DB::select('select * from users');
    $enc = json_encode($result);
    $ht = "<h3>TESTE</h3>";

    return response()->json(['success' => 'Got Simple Ajax Request.', 'lots' => $enc]);
}

如何在视图中回显变量 $enc 的每一行？

【问题讨论】：

我建议循环遍历data.lots，然后将每个项目附加到 HTML 元素内的页面中。你试过什么吗？
我是 java 脚本和 ajax 请求的新手，你能帮我看看如何做循环吗？ @ADyson
还有。我不知道您的具体框架/控制器代码，但我怀疑您实际上不需要这样做$enc = json_encode($result); - 这可能是对您的数据进行双重编码，因为我我猜response()->json 也将您传递给它的数组编码为 JSON。所以return response() - json(['success' = 'Got Simple Ajax Request.', 'lots' = $result]);可能就是你所需要的。（如果数据是双重编码的，你将无法循环它，因为lots 在到达你的 JS 代码时仍然是一个字符串。）

标签： javascript php html ajax laravel

【解决方案1】：

首先，你不需要 json_encode() $result 变量，因为 Laravel 会为你处理这个。您现在拥有的代码在技术上意味着您需要再次解码数据。

其次，您实际上不需要使用response()->json()，因为从路由/控制器方法返回的数组无论如何都会自动转换为 JSON。这更像是一个仅供参考，而不是您实际需要做的事情。

将您的控制器方法更改为：

public function ajaxRequestPost(Request $request)
{
    return [
        'success' => 'Got Simple Ajax Request.',
        'lots'    => DB::select('select * from users'),
    ];
}

然后循环遍历结果，您可以使用for 循环：

success: function (data) {
    for (var i = 0; i < data.lots.length; i++) {
        console.log(data.lots[i]);
    }
}

或者因为你使用的是 jQuery $.each(...):

success: function (data) {
    $.each(data.lots, function (index, item) {
        console.log(item);
    });
}

【讨论】：