使用jquery /Ajax将我的API连接到HTML

Connect my API to HTML with J.Query/Ajax

本文关键字：API 连接 HTML 我的 jquery Ajax 使用      更新时间：2023-09-26

之后，我一直试图弥补一个好的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站点中弹出。(它甚至不需要作为一个开始看起来很好)所以我的问题是，我如何才能让"魔法"发生?

所以，你的标记有点错…这是正确的。

<!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>
相关文章：