如何解析html已存储在变量中

时间:2013-09-05 08:00:17

标签: php javascript jquery html ajax

我想解析一个像这样的shoutcast页面: http://relay.181.fm:8800/played.html 所以,我只是让ajax调用一个php文件。 php文件返回页面的所有内容。 我将html内容存储到js中的var。这是代码: PHP:

function getcontent($server, $port, $file){
    $cont = "";
    $ip = gethostbyname($server);
    $fp = fsockopen($ip, $port);
    if (!$fp){
        return "Unknown";
    }
    else{
        $com = "GET $file HTTP/1.1\r\nAccept: */*\r\nAccept-Language: de-ch\r\n"
        ."Accept-Encoding: gzip, deflate\r\nUser-Agent: Mozilla/4.0 (compatible;"
        ." MSIE 6.0;Windows NT 5.0)\r\nHost: $server:$port\r\n"
        ."Connection: Keep-Alive\r\n\r\n";
        fputs($fp, $com);
        while (!feof($fp))
        {
            $cont .= fread($fp, 500);
        }
        fclose($fp);
        $cont = substr($cont, strpos($cont, "\r\n\r\n") + 4);
        return $cont;
        }
}
echo (getcontent("relay.181.fm", "8800", "/played.html"));

这是我的js:

var xhr = new XMLHttpRequest();
var parsed;
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        parsed=xhr.response;

    }
};
xhr.open("GET", 'http://localhost/getsong.php', true);
xhr.send(null);

这就是我想要的:

$(document).ready(function(){
var songs=new Array();
var time=new Array();
for (var i = 0; i < 10; i++) {
    songs[i]=$('table:eq(2) tr:eq('+(i+1)+') td:eq(1)').text();
    time[i]=$('table:eq(2) tr:eq('+(i+1)+') td:eq(0)').text();
};
});

如果我复制xhr.response内容并将其放入html文件中并执行此js,它将完全返回我想要的内容。 但是,当html在变量中时,我不知道我该怎么做......:'(

PS:我在wamp env。和node.js env。

上工作

4 个答案:

答案 0 :(得分:0)

我认为,您可以使用innerHTML来解决

var xhr = new XMLHttpRequest();
var parsed;
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        parsed=xhr.response;  
        document.getElementById('#div').innerHTML =  parsed;

    }
};
xhr.open("GET", 'http://localhost/getsong.php', true);
xhr.send(null);

答案 1 :(得分:0)

由于您使用jQuery标记它,为什么不使用内置的ajax功能:

 $.ajax({
     url: 'http://localhost/getsong.php',
     dataType: 'html'
 }).done(function(data){
      //do something with the HTML
      var $html = $(data),
          tdtexts = $html.find('table:eq(2) tr td:first').text();
 });

这是你要求的吗?

答案 2 :(得分:0)

获得response之后继续进行操作可能会对您有所帮助,

var xhr = new XMLHttpRequest();
var parsed;
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        parsed=$.parseHTML(xhr.response);
        var songs=new Array();
        var time=new Array();
        for (var i = 0; i < 10; i++) {
            songs[i]=$(parsed).find('table:eq(2) tr:eq('+(i+1)+') td:eq(1)').text();// use find function for parsed string
            time[i]=$(parsed).find('table:eq(2) tr:eq('+(i+1)+') td:eq(0)').text();
        };
    }
};
xhr.open("GET", 'http://localhost/getsong.php', true);
xhr.send(null);

使用$.ajax()

$(function(){
    $.ajax({
        url:'http://localhost/getsong.php',
        dataType:'html',
        success:function(parsed){
            var songs=new Array();
            var time=new Array();
            for (var i = 0; i < 10; i++) {
                songs[i]=$(parsed).find('table:eq(2) tr:eq('+(i+1)+') td:eq(1)').text();// use find function for parsed string
                time[i]=$(parsed).find('table:eq(2) tr:eq('+(i+1)+') td:eq(0)').text();
            };
        }
    });
});

答案 3 :(得分:0)

我认为你正在寻找jQuery.parseHTML()。它会将您的字符串解析为DOM节点数组。

http://api.jquery.com/jQuery.parseHTML/

以下是您案例的简单示例:

$.get('http://relay.181.fm:8800/played.html')
.done(function(data) {
    var parsed = $.parseHTML(data);
    // Now parsed is an array of DOM elements which you can use selectors on, eg:
    var song1 = $(parsed).find('table:eq(2) tr:eq(1) td:eq(1)').text();
    console.log(song1);
});