利用jquery解析返回的HTML数据

在做web服务的时候，如果你能同时控制服务器和客户端，返回的数据你可以自己定义，这是最理想的模式，但有时，你控制不了或只能控制服务器的一部分数据的时候，问题就来了：你不能按照你想要的格式如json或XML返回，每个网页都已经被服务器定义好了返回的html,你只能在其中插入数据。
       我在做一个嵌入式设备的时候就碰到了这样的问题，我必须使用内嵌的web服务器，它里面代码比较原始，全部由CGI直接返回html的数据，我想把jquery放到里面以提高前端的显示效率，但我只能把我的数据添加到web服务器，当然也可以自己去改web服务器，但代价太高，我只想从返回的html中抽出我需要处理的数据，略过其他数据，而且不能影响到返回的数据在其他位置的显示，所以偷懒使用了下面的办法，我知道也许有更好的办法，但google 没找到合适的。如有更好的办法，请回复下！
       1）在服务器端把你的返回数据用ID做标记，例如，你本来返回的是一个ip地址，把它改写成这样：
              webresult("<div id=myip>ip</div>")
             (原来的做法：webresult（“ip”）)
       2） 写一个函数取得自己的数据

  下面是一个例子：

/* get  server status function 
* author: Seabird
*/ 
function getConnectStatus() {
        $.ajax({
                type:“GET”
                url：“/XXXXX /getConnectStatus",
                dataType:"html",
                success:function(data) {
                        var $msg1 = $(data);
                        var sta = $msg1.filter("#status").html();
                                if (sta  !== "NO") {
                                $("#connect").show();
                        var staArry = "<tr><td>" + $msg1.filter("#userid").html() + "<
/td>"
                                        + "<td>" + $msg1.filter("#role").html() + "<
/td>"
                                        + "<td>" + $msg1.filter("#from").html() + "
</td>"
                                        + "<td>" + $msg1.filter("#connect").html() +
 "</td></tr>";
                         $("#result").append(staArry);

                                } else {$("#connect").hide(); }
                        }
});

}

3)注意红色的代码，那个#status是服务器返回的，不是客户端的，下面是服务器返回的格式：

.....
if (connected) {
webresult("<div id=status>connected</div>");
webresult("<div id=userid>123456</div>");
webresult("<div id=role>Client1</div>");
webresult("<div id=from>1.1.1.1</div>");
webresult("<div id=connect>server1</div>");
} else { webresult("<div id=status>NO</div>")；

4) 客户端调用：
在需要显示的地方加入：

<div id=connect>
       <div id=result></div>
</div>

这样，你只要在点击或鼠标扫过的地方加入这个事件就可以了

 

 

 

转载于:https://www.cnblogs.com/MMLoveMeMM/articles/3543712.html