从网页中获取数据答案

【问题标题】：Fetch data from web page从网页中获取数据
【发布时间】：2014-09-06 22:49:42
【问题描述】：

我正在尝试仅使用 javascript 从维基百科中抓取第一段。基本上，我想做的是

document.getElementsByTagName("P")[0]

除了它不在我的网页上，我想从维基百科获取给定的页面并应用该功能。我目前的代码给出：

Uncaught TypeError: undefined is not a function

我的代码：

function getWikiDescription(searchTerm)
{
    var theURL = "http://en.wikipedia.org/wiki/" + searchTerm.replace(" ", "_");
    var article = null;
    $.get(theURL, function(data){
        wikiHelper(data);
    }, "html");
}
function wikiHelper(data)
{
    alert(data);
    console.log(data.getElementByTagName("p")[0]);
}
getWikiDescription("godwin's law");

data 基本上变成了一个包含所有 html 的巨大字符串，但是 getElementByTagName 函数不起作用。任何帮助将不胜感激，在此先感谢。

【问题讨论】：

它是getElementsByTagName，带有s。（这可能仍然行不通，但这是一个开始！）
很好，但这并没有解决问题。
这是一个字符串，不是 dom 树。 getElementsByTagName 在 dom 树上工作，而不是在字符串上（而字符串实际上没有那个方法）。

标签： javascript html wikipedia-api

【解决方案1】：

浏览器通常不允许向与脚本来源不同的域发送 ajax 请求。您不能像这样向您喜欢的任何页面发送和 ajax 请求。阅读same origin policy 还有关于ways to circumvent this。

【讨论】：

【解决方案2】：

您可以使用 jQuery 和 WikiMedia API 都支持的 JSONP（通过遵守 ?callback=? 查询参数）

"use strict";

var endpoint = 'http://en.wikipedia.org/w/api.php';

$.ajax({
    url: endpoint,
    crossDomain: true,
    dataType: 'jsonp',
    data: {
        format: "json",
        action: "parse",
        page: "Bay_View_Historical_Society"
    },
    error: function(xhr,status,error){
        alert( error );
    }
}).done(function(rawhtml){
    var dom_object = $( '<div>' + rawhtml.parse.text['*'] + '</div>' );
    var p = $(dom_object).find('p').first();
    p.appendTo('#output');
});

工作示例：

http://jsfiddle.net/sean9999/0h4t0ybd/2/

jQuery 不是绝对必要的，但它使代码简洁易读。

代码执行以下操作：

对内容发出 JSONP 请求
将标记下拉为文本
将文本转换为 DOM 结构
查询第一个节点的DOM结构（doc.getElementsByTagName("P")[0]）

【讨论】：