Question

我是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的搜索脚本）

Answer 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>

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

1 个答案: