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

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

javascript php jquery

Javascript 无法获取API以在jQuery中显示数据,javascript,php,jquery,get,xmlhttprequest,Javascript,Php,Jquery,Get,Xmlhttprequest,我是jQuery新手，并不擅长编程，但我不知道如何解决这个问题，我正在使用列表API，并试图使用jQuery返回JSON，但无法让它工作不管怎样，脚本总是会失败，这让我很困惑，因为我用常规JavaScript编写了这个脚本。jQuery脚本如下所示，我试图获取JSON的结果，以显示在一个名为searchresults的html分区中 $(document).ready(function(){ $("#searchForm").on("submit", function () {

我是jQuery新手，并不擅长编程，但我不知道如何解决这个问题，我正在使用列表API，并试图使用jQuery返回JSON，但无法让它工作

不管怎样，脚本总是会失败，这让我很困惑，因为我用常规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，因此我无法想象我必须更改搜索脚本，谢谢您的时间。基于下面的搜索脚本是我的工作副本。我能够让代码正常工作。我设置了一个本地测试。关键是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>

非常感谢你，我真的很感谢你的帮助，很抱歉回复晚了！