將內容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彈出框

回答

相關問題