【问题标题】:Setting up a local proxy to access imdb设置本地代理以访问 imdb
【发布时间】:2014-05-10 05:01:48
【问题描述】:

我想搜索给定标题名称下的所有内容,例如星球大战,就像这里搜索 http://www.imdb.com/xml/find?json=1&nr=1&tt=on&q=star%20wars

我想以表格的形式列出所有结果

这是我到目前为止的代码,我不得不从使用简单的 omdb api 进行更改,因为这最多只能允许十个结果

现在我不断收到 javascript 错误任何帮助请我知道我需要设置一个 localproxy 需要帮助 PLZ

会喜欢例子

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Sample</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script>
    $( document ).ready(function() {
        $("#SampleSearchButton").click(function() {
            getImdbInfo($("#title").val());
        })
    });

    // The function below takes the entered title and searchs imdb for a match then it displays as followed

    function getImdbInfo(Title) {
        $.ajax({
          url: "http://www.imdb.com/xml/find?json=1&nr=1&tt=on&q=" + Title,
          cache: false,
          dataType: "json",
          success: function(data) {
                // you get an object for iteration, the keys are Title, Type, Year, imdbID
                console.log(data);

                var str = '<table>';
                str += "<thead><th>Index</th><th>Title</th><th>Type</th><th>Year</th><th>imdbID</th></thead>"

                // iterate over the data result set
                $.each(data.Search, function(index, element) {
                    str += "<tr>";
                    str += "<td>" + index + "</td>";
                    str += "<td>" + element.Title + "</td>";
                    str += "<td>" + element.Type + "</td>";
                    str += "<td>" + element.Year + "</td>";
                    str += "<td>" + element.imdbID + "</td>";
                    str += "</tr>";
                });

                str += '</table>';

                // insert the html
                $("#SampleResults").html(str);
          },
          error: function (request, status, error) { alert(status + ", " + error); }
        });
    }
    </script>
</head>
<body>


<!-- search textbox -->
<input type="text" id="title" placeholder="Enter Name for search">

<!-- do search button -->
<button type="text" id="SampleSearchButton">Search</button>

<!-- display results container -->
<div id="SampleResults"></div>
</body>
</html>

【问题讨论】:

  • 这是一个小提琴jsfiddle.net/Tv53v,但它有一个错误XMLHttpRequest cannot load http://www.imdb.com/xml/find?json=1&amp;nr=1&amp;tt=on&amp;q=fred&amp;_=1396227974662. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.
  • 来自stackoverflow.com/questions/1966503/does-imdb-provide-an-api:“缺点:没有 JSONP。为了从 JavaScript 跨域使用,需要本地代理。”
  • 谁能告诉我如何使用本地代理或步骤来做到这一点的例子
  • 谁能告诉我如何使用本地代理执行此操作的示例,或者我需要执行示例的步骤会很棒
  • 编辑问题标题以反映您在设置本地代理以访问 imdb 方面需要帮助可能会吸引熟悉设置的人。

标签: javascript jquery html json imdb


【解决方案1】:
  • 你输入标题
  • 标题附加到一个url,它调用你本地的php文件
  • 本地 php 文件接受标题并将其附加到您要调用的 API url
  • 发出请求并返回内容
  • 返回的内容然后被js接受
  • 检查 console.log 以了解确切的数据结构
  • 到主键“title_popular”和“title_exact”,这就是为什么有两个表
  • 注意“description”和“title_description”,两者似乎相同(API BUG?),所以它们被打印了两次!
  • 我没有时间完全构建表格
  • 也许你应该问别人,如何更优雅地打印多级对象

PHP

imdb-fetcher.php

 <?php
 $title = $_GET['title']; // <- you need to secure this
 echo file_get_contents(
    'http://www.imdb.com/xml/find?json=1&nr=1&tt=on&q=' . $title
 );

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Sample</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script>
    $( document ).ready(function() {
        $("#SampleSearchButton").click(function() {
            getImdbInfo($("#title").val());
        })
    });

    // The function below takes the entered title and searchs imdb for a match then it displays as followed

    function getImdbInfo(title) {
         $.ajax({
          type: 'GET',
          url: "imdb-fetcher.php?title=" + title, // <-- request to PHP data fetcher
          dataType: "json",
          success: function(data) {
                // you get an object for iteration, see console for keys
                console.log(data);

                // table for title_popular
                var str = '<table>';
                str += "<thead><th>Index</th><th>id</th><th>title</th><th>title_desc</th><th>year</th><th>description</th></thead>";

                $.each(data.title_popular, function(index, element) {
                    str += "<tr>";
                    str += "<td>" + index + "</td>";
                    $.each(element, function(key, element) {
                        str += "<td>" + element + "</td>";
                    });
                    str += "</tr>";
                });

                str += '</table>';

                // table for title_exact
                str += '<table>';
                str += "<thead><th>Index</th><th>id</th><th>title</th><th>title_desc</th><th>year</th><th>description</th></thead>";

                $.each(data.title_exact, function(index, element) {
                    str += "<tr>";
                    str += "<td>" + index + "</td>";
                    $.each(element, function(key, element) {
                        str += "<td>" + element + "</td>";
                    });
                    str += "</tr>";
                });


                // insert the html
                $("#SampleResults").html(str);
          },
          error: function (request, status, error) { alert(status + " - " + error); }
        });
    }
    </script>
</head>
<body>


<!-- search textbox -->
<input type="text" id="title" placeholder="Enter Name for search">

<!-- do search button -->
<button type="text" id="SampleSearchButton">Search</button>

<!-- display results container -->
<div id="SampleResults"></div>
</body>
</html>

结果

【讨论】:

  • 还有一个我不熟悉php的问题,你能解释一下我如何同时喜欢php和html吗?
  • 您需要一个支持 PHP 的网络服务器。您只需将两个文件放在同一个文件夹中,然后在浏览器中打开 html 文件。本地开发网络服务器也可以工作!你有哪个操作系统?
  • 任何开发堆栈,例如 wpn-xmxampp 都可以使用
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-05-17
  • 2018-10-10
  • 1970-01-01
  • 2020-11-07
  • 1970-01-01
相关资源
最近更新 更多