将内容ajax加载到html弹出框

所以我试图用IMDb API做这件事。当您按电影标题时，应该显示弹出窗口，其中包含有关该电影的一些信息。我一直在做一些事情，但我不知道如何继续。如何将我检索到的电影数据发送到我创建的HTML弹出窗口中？将内容ajax加载到html弹出框

所以，这是我的HTML代码：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Plugin</title> 
    <link rel="stylesheet" href="css/style.css"/> 

</head> 
<body> 

<h1>...</h1> 

<div id="container"> 

    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     <span class="movie" onclick="window.open('js/popup.js', 'imdbData','width=700,height=200');">The Shawshank Redemption </span> 
     sed metus tortor, condimentum at mi non, scelerisque bibendum ante. 
     Suspendisse dictum eget turpis nec condimentum. 
     fermentum mauris. 
    </p> 

</div> 


</body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="js/main.js"></script> 
</html>

我的PHP文件看起来像这样：

<?php 

$jsonText = file_get_contents('http://www.omdbapi.com/?i=tt0111161'); 

$imdb = json_decode($jsonText, true); 


$results[] = [ 
    'Title' => $imdb['Title'], 'Year' => $imdb['Year'], 'imdbRating' => $imdb['imdbRating'] 
]; 

echo json_encode($results); 
?>

最后我main.js：（这是没有太大的真的）

function getJson() { 
    $.ajax({ 
     dataType: "json", 
     url: 'imdb.php', 
     success: 
    }); 
}

来源

2015-04-02 Betul

在$ .ajax上的成功将是一个函数，您将获得数据并执行相关操作。像...成功：功能（数据）{console.debug（数据）; $（“＃your-popup-id”）。html（...）} ....在.html上，您可以在解析成功函数后放置数据（例如，使用使用html标记创建字符串数据），或者在弹出窗口中找到特定的字段，并在其上放置特定的数据。 – jarz 2015-04-02 19:55:51

弹出窗口在哪里？在另一个URL？ – lshettyl 2015-04-02 20:01:31

@ LShetty我的文件名为'popup.js'是空的，这就是为什么我没有发布它。 – Betul 2015-04-02 20:03:26

不确定“弹出”是什么，但让我们假设这个“弹出”有一个ID为“movie-title”的元素，你希望用它填充E从数据Title属性：

function getJson() { 
    $.ajax({ 
     dataType: "json", 
     url: 'imdb.php', 
     success: function (data) { 
      $('#movie-title').html(data.Title) 
     } 

    }); 
}

来源

2015-04-02 19:57:48

那么，你可以在我的html中找到我的弹出代码。我给了它一个类名“电影”。我从来没有使用过弹出窗口，所以我不知道使用什么方法。 – Betul 2015-04-02 20:02:25

啊，所以你试图使用的是一个新的窗口。在这种情况下，使用ajax在新窗口中显示内容没有任何意义。你最好把你的“弹出”指向PHP页面，并在那里显示HTML而不是JSON。 – 2015-04-03 12:08:10

我会做它在指出错误的方式。首先，我将准备php文件中的所有弹出窗口（这对我来说很容易）。然后创建弹出式div .e.g。。ID my_popup

function show_popup() { 
$.ajax({ 
    dataType: "html", 
    url: 'imdb.php', 
    .done(function(msg) {

$（ “＃my_popup”）HTML（MSG） }）;

}）;

}

来源

2015-04-02 20:08:46

将内容ajax加载到html弹出框

回答

相关问题