Javascript 设置本地代理以访问imdb
我想在一个给定的标题下搜索所有的东西,比如星球大战,就像这里的搜索一样 我想以表格形式列出所有结果 这是我到目前为止使用easy omdb api时不得不更改的代码,因为它最多只允许十个结果 现在我不断收到javascript错误的任何帮助plz我知道我需要设置一个localproxy需要帮助plz 我想举个例子Javascript 设置本地代理以访问imdb,javascript,jquery,html,json,imdb,Javascript,Jquery,Html,Json,Imdb,我想在一个给定的标题下搜索所有的东西,比如星球大战,就像这里的搜索一样 我想以表格形式列出所有结果 这是我到目前为止使用easy omdb api时不得不更改的代码,因为它最多只允许十个结果 现在我不断收到javascript错误的任何帮助plz我知道我需要设置一个localproxy需要帮助plz 我想举个例子 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> &
<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>
样品
$(文档).ready(函数(){
$(“#SampleSearchButton”)。单击(函数(){
getImdbInfo($(“#title”).val();
})
});
//下面的函数获取输入的标题并搜索imdb以查找匹配项,然后显示如下
函数getImdbInfo(标题){
$.ajax({
url:“http://www.imdb.com/xml/find?json=1&nr=1&tt=on&q=“+标题,
cache:false,
数据类型:“json”,
成功:功能(数据){
//你得到一个迭代对象,关键是Title、Type、Year和imdbID
控制台日志(数据);
var-str='';
str+=“IndexTitleTypeYearimdbID”
//迭代数据结果集
$.each(data.Search,函数(索引,元素){
str+=”;
str+=“”+索引+“”;
str+=“”+元素。标题+“”;
str+=“”+元素。类型+“”;
str+=“”+元素。年份+“”;
str+=“”+element.imdbID+“”;
str+=”;
});
str+='';
//插入html
$(#SampleResults”).html(str);
},
错误:函数(请求、状态、错误){alert(状态+,“+错误);}
});
}
搜寻
- 您可以输入标题
- 标题附加到一个url,该url调用本地php文件
- 本地php文件接受标题并将其附加到要调用的API url
- 发出请求并返回内容
- 然后js接受返回的内容
- 检查console.log以了解确切的数据结构
- 主键“title\u popular”和“title\u exact”,这就是为什么有两个表
- 注意“description”和“title_description”,两者似乎是相同的(API BUG?),所以它们会被打印两次李>
- 我没有时间把桌子安排得井井有条
- 也许你应该问问别人,如何打印出更优雅的多级对象
<?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
);
搜寻
结果
这里有一个小提琴,但它有一个错误
XMLHttpRequest无法加载http://www.imdb.com/xml/find?json=1&nr=1&tt=on&q=fred&_=1396227974662. 请求的资源上不存在“Access Control Allow Origin”标头。起源'http://fiddle.jshell.net因此不允许访问。
From:“缺点:没有JSONP。为了从JavaScript跨域使用,需要一个本地代理。”有人能给我举一个如何使用localproxy或stepscan的例子吗?有人能给我举一个如何使用localproxy或我需要执行的步骤的例子吗设置它们。还有一个我不熟悉php的问题,你能解释一下我是如何喜欢php和html的吗?你需要一个支持php的Web服务器。您只需将两个文件放在同一个文件夹中,然后在浏览器中打开html文件。本地开发Web服务器也可以工作!你有哪些操作系统?任何开发堆栈都可以工作
<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>