Javascript 使用J.Query/Ajax将我的API连接到HTML_Javascript_Jquery_Html_Json_Ajax

Javascript 使用J.Query/Ajax将我的API连接到HTML

javascript jquery html json ajax

Javascript 使用J.Query/Ajax将我的API连接到HTML,javascript,jquery,html,json,ajax,Javascript,Jquery,Html,Json,Ajax,在我尝试编写一个好的JSON java API之后，我终于做到了。我使用了一个非常简单的API，如下所示（以Interstellar为例）：所以我开始制作一个非常简单的HTML（我在这方面很新，只想让它作为开始工作，然后我可以在将来更好地开发它）现在看起来是这样的 <!DOCTYPE HTML> <html> <head> <title>Movies</title> </head> <body>

在我尝试编写一个好的JSON java API之后，我终于做到了。我使用了一个非常简单的API，如下所示（以Interstellar为例）：

所以我开始制作一个非常简单的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>

现在我被卡住了，基本上我想做的就是当我在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>

还有你的纽扣装订

$('. 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>


影视
函数callAjax（）
{
变量url=”http://localhost:1337/search/"
$.ajax({
url:url，
成功：功能（数据）
{
$（'.tfclear'）。追加（数据）；
},
错误：函数（err）
{
//抛出错误
}
});
}
$（'.tfbutton'）。在（'click'，function（）上{
callAjax（）；
});

您需要将ajax调用移动到按钮单击事件，您可以解释一下或给我一个示例如何操作吗？我对HTML非常陌生，以前从来没有这样做过，也非常感谢您为我抽出时间！我再加一个答案，伙计，给我两分钟……好的，先生：）@AdamJeffers我看了看AdamJeffers的答案。他让你走上了正确的道路。如果我错了，我很抱歉，我编辑了我的帖子。你能告诉我怎么了吗？请查看我的最新答案。。。我对“tfButton”类名etcOkey有一些大写字母，所以我也修改了它，但在搜索栏中搜索时没有结果。我的意思是什么都没有。它只是卡住了，url仅更改为search=“movie title”和im my api。它的工作原理如下：movie here“。所以我想我必须更改输入？我想这是一个愚蠢的问题，但是你的控制台有任何错误吗？”？像jQuery没有加载等？嗯，现在只有一个搜索栏，当输入电影标题等星际。然后按下“搜索”按钮，它会把我带到另一个网站，上面写着“找不到网站，找不到文件”

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>