使用 JQuery/Ajax 将我的 API 连接到 HTML答案

【问题标题】：Connect my API to HTML with J.Query/Ajax使用 JQuery/Ajax 将我的 API 连接到 HTML
【发布时间】：2016-01-20 11:53:21
【问题描述】：

在尝试编写一个好的 JSON java API 之后，我终于成功了。我使用了一个非常简单的 API，看起来像这样（以星际为例）：

    {
    "title": "Interstellar",
    "release": "2014-11-05",
    "vote": 8,
    "overview": "Interstellar chronicles the adventures of a group of explorers who make use of a newly discovered wormhole to surpass the limitations on human space travel and conquer the vast distances involved in an interstellar voyage.",
    "poster": "http://image.tmdb.org/t/p/w500/nBNZadXqJSdt05SHLqgT0HuC5Gm.jpg",
    "trailer": "https://youtu.be/zSWdZVtXT7E"
}

所以我开始制作一个非常简单的 HTML（我在这方面真的很新，只是想让它作为开始工作，然后我可以在未来更好地开发它）

所以现在看起来像这样

    <!DOCTYPE HTML>
<html>
<head>
<title>Movies</title>
</head>

<body>
    <center><div id="tfheader">
        <form id="tfnewsearch" method="get" action="Search movie">
                <input type="text" class="tftextinput" name="q" size="15" maxlength="120"><input type="submit" value="search" class="tfbutton">
        </form>
    <div class="tfclear"></div></center>
    </div>
</body>
</html>

我现在只有一个搜索按钮，它什么都不做。所以我的想法是做，当我搜索一个电影的例子星际。它应该将我在 JSON 中的内容弹出到 HTMl 中，我的意思是标题、概述等。但我真的不知道如何开始。我是这样开始的：

$(document).ready(function () {
  $.ajax({
    url: "",
    headers: {"Accept": "application/json"}
  })

现在我被卡住了，基本上我想做的就是当我在 HTML 的搜索栏中搜索时，它应该“连接”到我的 API，API 会返回信息，然后它应该会弹出我的 HTML 网站。（它甚至不必作为一个开始看起来很好）所以我的问题是，我怎样才能让“魔法”发生？

【问题讨论】：

您需要将 ajax 调用移动到按钮单击事件
您能解释一下或举个例子吗？我是 HTML 的新手，以前从未这样做过，非常感谢您抽出宝贵的时间为我服务！
我会添加一个答案队友给我 2 分钟...
好的，先生 :) @AdamJeffers
我看了 AdamJeffers 的回答。他让你走上正确的道路。

标签： javascript jquery html json ajax

【解决方案1】：

所以，您的标记有点错误......这里是正确的。

<!DOCTYPE HTML>
<html>
<head>
<title>Movies</title>
</head>

<body>
    <center>
        <div id="tfheader">
            <form id="tfnewsearch" method="get" action="Search movie">
                <input type="text" class="tftextinput" name="q" size="15" maxlength="120"><input type="submit" value="search" class="tfbutton">
            </form>
            <div class="tfclear"></div>
        </div>
     </center>
</body>
</html>

你的 JS 应该是这样的......

function callAjax()
{
    var url = "http://whatever.com"
    $.ajax({
        url: url,  
        success: function(data) 
        {
            $('.tfclear').append(data); 
        },
        error: function(err)
        {
            // throw error
        }
    });
}

还有你的按钮绑定...

$('. tfbutton').on('click', function(){
     callAjax();
});

编辑：

如果你做的都是内联的，应该像下面这样......

<!DOCTYPE HTML>
<html>
<head>
<title>Movies</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function callAjax()
{
    var url = "http://localhost:1337/search/"
    $.ajax({
        url: url,  
        success: function(data) 
        {
            $('.tfclear').append(data); 
        },
        error: function(err)
        {
            // throw error
        }
    });
}

$('.tfbutton').on('click', function(){
     callAjax();
});
</script>

<body>
    <center>
        <div id="tfheader">
            <form id="tfnewsearch" method="get" action="Search movie">
                <input type="text" class="tftextinput" name="q" size="15" maxlength="120"><input type="submit" value="search" class="tfbutton">
            </form>
            <div class="tfclear"></div>
        </div>
     </center>
</body>
</html>

【讨论】：

如果我错了，我很抱歉，我编辑了我的帖子。你能告诉我有什么问题吗？
请检查我对我的答案的最新更新...我有一些大写字母用于“tfButton”类名等
Okey所以我也改了，但是在搜索栏中搜索时没有结果。我的意思是什么都没有弹出。它只是卡住了，url 只更改为 search="movie title" 而我的 api 它的工作方式如下：localhost:1337/search/"enter 电影在这里"。所以我想我必须更改输入？
我想这是个愚蠢的问题，但是您的控制台中是否有任何错误？像没有加载 jQuery 等？
嗯，现在只有一个搜索栏，当输入电影标题等时。星际。然后按下按钮搜索按钮，它只会把我带到另一个网站，上面写着找不到网站，ERR_FILE_NOT_FOUND