代码之家 › 专栏 › 技术社区 › Jacques Le Breuilly

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

xmlhttprequest get jquery php javascript

Jacques Le Breuilly · 技术社区 · 8 年前

我是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 )

1 回复 | 直到 8 年前

user9189147 8 年前

下面是我的工作副本。我能够让代码正常工作。我设置了一个本地测试。关键是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>