繁体   English   中英

将内容ajax加载到html弹出窗口中

[英]loading content ajax into html popup

因此,我正在尝试使用IMDb API进行制作。 当您按下电影标题时,应该显示一个弹出窗口,其中包含有关该电影的一些信息。 我一直在做一些事情,但是我不知道如何继续。 如何将检索到的电影数据发送到创建的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: 
    });
}

不确定“弹出窗口”是什么,但让我们假设此“弹出窗口”具有一个ID为“电影标题”的元素,您希望使用数据中的Title属性填充该元素:

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

    });
}

我会以不同的方式来做。 首先,我将在php文件中准备所有弹出式窗口(对我来说这更容易)。 然后创建弹出div .eg id my_popup

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

$(“#my_popup”)。html(msg)});

});

}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM