无法获取 API 以在 jQuery 中显示数据答案

【问题标题】：Cannot get API to display data in jQuery无法获取 API 以在 jQuery 中显示数据
【发布时间】：2018-07-27 18:32:09
【问题描述】：

我是 jQuery 新手，不是最擅长编程，但我不知道如何解决这个问题，我正在使用“TheList”API，并尝试使用 jQuery 返回 JSON，但无法使其正常工作。 (https://api.list.co.uk/documentation)

无论如何，脚本总是会失败，这让我感到困惑，因为我在常规 JavaScript 中得到了这个。 jQuery 脚本如下所示，我试图将 JSON 的结果显示在名为 searchresults 的 html 分区中。

$(document).ready(function(){

    $("#searchForm").on("submit", function () {
        var data = $(this).serialize(); // this refers to submitted form, serizlize well see later in console:
        console.log(data);

        var display = $("#searchresults");
        display.text('CALCULATING');

        $.ajax({
            type: "GET",
            url: "/~lebreuillyj/project/webservice/search.php?" + data,
            dataType: "json",

            success: function(result)
            {
                var output = "";

                for(var i=0; i<result.length; i++) 
                {
                    output+= result[i].event["name"] + "<br />";
                }

                display.html(output);

                $("#searchresults").append(output);
            },
            error: function(xmlHttpRequest, statusMessage, httpCode) 
            { 
                alert("HTTP code=" + httpCode + " statusMessage=" + statusMessage + " full response text" + xmlHttpRequest.responseText); 
                alert("/~lebreuillyj/project/webservice/search.php?" + data);
            }
        });

    }); 
});

搜索脚本也如下：

<?php

header("Content-type: application/json");

$apiKey = ;
$opts = array(
    'http' => array(
        'header'=>"Authorization: Bearer {$apiKey}\r\n"
    )
);

$name = $_GET["name"]; 

if($name == "") 
{
    header("HTTP/1.1 400 BAD REQUEST");
}

elseif(isset($_GET["name"]))
{
    header("HTTP/1.1 200 OK");

    $context = stream_context_create($opts);

    $data = file_get_contents('https://api.list.co.uk/v1/search?query=' .$name , false, $context);

    echo $data;
}

?>

搜索脚本确实可以在我的常规 javascript 文件中使用，但我想学习 jQuery，所以我无法想象我必须更改搜索脚本，感谢您的时间。（搜索脚本基于https://api.list.co.uk/getting-started）

【问题讨论】：

标签： javascript php jquery get xmlhttprequest

【解决方案1】：

以下是我的工作副本。我能够让代码工作。我设置了本地测试。关键是 e.preventDefault()，它会阻止表单实际提交，从而导致问题。此外，您可能希望从您的问题中删除您的 API 密钥。希望这会有所帮助。

<html>
<head>
<script
              src="http://code.jquery.com/jquery-1.12.4.js"
              integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
              crossorigin="anonymous"></script>

</head>
<body>
<form id="searchForm" method="get">
    <input type="text" name="name">
    <input type="submit" name="submit">
</form>
<div id="searchresults"></div>
<script type="text/javascript">
    $(document).ready(function(){

    $("#searchForm").on("submit", function (e) {
        e.preventDefault();
        var data = $(this).serialize(); // this refers to submitted form, serizlize well see later in console:
        console.log(data);

        var display = $("#searchresults");
        display.text('CALCULATING');

        $.ajax({
            type: "GET",
            url: "/~lebreuillyj/project/webservice/search.php?" + data,
            dataType: "json",
            success: function(result)
            {
                console.log(JSON.stringify(result));
                var output = "";
                for(var i=0; i < result.length; i++)
                {
                    output+= result[i]['name'] + "<br />";
                }
                display.append(output);

                $("#searchresults").append(output);
            },
            error: function(xmlHttpRequest, statusMessage, httpCode)
            {
                console.log("HTTP code=" + httpCode + " statusMessage=" + statusMessage + " full response text" + xmlHttpRequest.responseText);
                alert("/~lebreuillyj/project/webservice/search.php?" + data);
            }
        });

    });
});
</script>
</body>
</html>

【讨论】：

非常感谢，非常感谢您的帮助，抱歉回复晚了！