javascript 解析或转换json和xml

原创
2014/11/12 22:18
阅读数 3.2K

javascript 使用Jquery解析Json和xml,json和xml是2类常用的数据交换格式,json是javascript的一部分,类似字面量对象,对于xml,javascript处理起来比较费时费事

json的用法基本不讲了吧,这里只谈谈如何将字符串转为json对象,或者json对象如何转为字符串。


1.字符串转json对象,我们推荐使用浏览器对象模型 BOM处理 window.JSON对象
JSON字符串目标:
var str1 = '{ "name": "cxh", "sex": "man" }'; 
JSON对象结果:
var str2 = { "name": "cxh", "sex": "man" };

转换方法如下三种

var obj = eval('(' + str + ')');  //危险性极高的方法,尽量避免使用

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

var obj = jQuery.parseJSON(str); //使用zepto.js或者jQuery.js

注:eval方法具有与生俱来的风险,尽量少用,避免非法程式注入

2.JSON对象转字符串
例如:
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
或者
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符


让json转为字符串意义不大,因为javascript对接送传值具有自动转换功能,所以说接送转字符串近乎没必要,但反过来意义特别大,

将字符串变为接送对象,操作起来非常顺手


3.jQuery处理xml文档解析
<?xml version="1.0" encoding="utf-8" ?>  
<bookstore>  
  <book id="No1">  
      <title>An Introduction to XML</title>  
      <author>Chunbin</author>  
      <year>2010</year>  
      <price>98.0</price>  
        
    </book>  
  <book id="No2">  
      <title>The Performance of DataBase</title>  
      <author>John</author>  
      <year>1996</year>  
      <price>56.0</price>  
    </book>  
</bookstore>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>无标题页</title>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        function search() {  
            var searchStrLow = $("#txtTitle").val().toLowerCase();  
            $.post("1.xml", function(data) {  
                var html = "";  
                $(data).find('book').each(function() {  
                    var titleLow = $(this).find("title").text().toLowerCase();  
                    if (titleLow.indexOf(searchStrLow)!=-1) {  
                        html += "<tr><td>" + $(this).find("title").text() + "</td>";  
                        html += "<td>" + $(this).find("author").text() + "</td>";  
                        html += "<td>" + $(this).find("year").text() + "</td></tr>";  
                        $("#tbody").html(html);  
                    }  
                });  
            });  
        }  
</script>  
</head>  
<body>  
    <span>输入标题:</span><input id="txtTitle" type="text" />  
    <input id="Button1" type="button" value="搜索" onclick="search()" />  
    <table style="width: 100%;">  
        <thead><tr><td>Title</td><td>Author</td><td>Year</td></tr></thead>  
        <tbody id="tbody">  
        </tbody>  
    </table>  
</body>  
</html>


展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
4 收藏
1
分享
返回顶部
顶部