json字符串拼接与解析python、django、js---python实训day3、4知识点总结

1、python中json字符串拼接

由http://www.json.cn/wiki.html，可知json的基本含义，并知道json的基本组成为数组[]和对象{}

对于json当然可以直接使用python库中的方法，但是我们首先手动拼接一下：

项目中使用到是如下的json数据，articleList键值对应一个article数组，数组中有两个对象，每个对象又有article的属性。

{"articleList":[

{"articleName":"测试标题1",
"articleId":"1",
"articleContent":"内容"
},
{
"articleName":"测试标题2",
"articleId":"2",
"articleContent":"内容2"
}

]

}

在json.cn中进行json检测如下：

手动拼接如下：

articles = TArticle.objects.raw( "select * from article_tarticle" )#得到要拼接的model数据

list = "{ \" articlelist \" :["

for article in articles:

list += str (article)

return HttpResponse(list[: list .rindex( "," )] + "]}" )

   其中str(article)为重写对应model类article中对应的str方法如下：

def __str__ ( self ):

articleNameJson = " \" articleName \" : \" " + self .articleName + " \" "

articleIdJson = " \" articleId \" : \" " + str ( self .articleId) + " \" "

articleContenrJson = " \" articleContent \" : \" " + self .articleContent + " \" "

return "{" + articleNameJson + "},"

通过上述操作，就可以生成我们最开始给出的articleList对于的json字符串。

使用库函数拼接：

  我们倒序来看进行的操作

view.py:

articles = TArticle.objects.raw( "select * from article_tarticle" )#从model中查询到数组

from aisystem.utils import json

return HttpResponse(json.objects_to_json(articles, "articlelist" )) #直接调用封装好的objects_to_json方法

objects_to_json中传入了两个参数，第一个为从表中查询到的article所有数据项，即为待变为json数据的内容，第二参数为json article所有数据项对应的key值，然后我们进入到aisystem文件夹下新建的utils文件夹下的json.py文件中查看objects_to_json方法：

def objects_to_json ( objects , objectName ):

iobjects = [] #列表

for obj in objects:

iobjects.append(model_to_dict(obj)) #append列表中增加项 不用考虑 , #model转为字典

backValue = {objectName:iobjects}

return json.dumps(backValue, cls = json_encoder) #将字典转换为json

上述方法利用django中的函数库即实现了拼接操作：

            model_to_dict将model转化为字典，

        iobjects为列表，append操作即为插入列表,

            然后利用backValue变量生成json字符串，即包括一个objectName（key），以及一个相应的对象数组[]

同时cls=json_encoder是对datetime类型处理，防止出现Object of type 'datetime' is not JSON serializable错误，

class json_encoder ( json . JSONEncoder ):

def default ( self , obj ):

if isinstance (obj,(datetime.datetime,)):

return { "dateCreated" :date.date_str(obj)}

# elif isinstance(obj,(ImageFieldFile,)):此处欲对image类型进行处理但一直bug 便在model中img改为了char类型

# return {"img":

else :

return super ().default(obj)

同时date.date_str（obj）方法为utils文件夹下新建的date.py文件下的方法：

def date_str ( date ):

return date.strftime( '%Y-%m- %d %H:%M:%S' )

即将date类型转换为字符串类型，或者也可以直接将date.date_str(obj)换为obj.strftime(   '%Y-%m-%d %H:%M:%S')即可。

即如上图所示，便抽象出一个可复用的将model数据转换为json字符串的方法，非常巧妙。

当然也可以直接写对应的方法不写上述可复用的方法：

import json

class json_encoder ( json . JSONEncoder ):

def default ( self , obj ):

if isinstance (obj,(datetime.datetime,)):

return { "dateCreated" :obj.strftime( '%Y-%m- %d %H:%M:%S' )}

# elif isinstance(obj,(ImageFieldFile,)):

# return {"img":}

else :

return super ().default(obj)
----
articles = TArticle.objects.raw( "select * from article_tarticle" )

articleList = [] #列表

from django.forms.models import model_to_dict

for article in articles:

articleList.append(model_to_dict(article)) #model转为字典

print (articleList)

backValue = { "articlelist" :articleList} #字典形式里面空的列表

return HttpResponse(json.dumps(backValue, cls = json_encoder))

但好像工作量差距并不大，还是推荐写一个可复用的方法。

2、JS中JSON字符串解析

<ul class = "list" >

</ul>

var obscache = [];
---

var obs = JSON . parse ( data );

obscache . push ( obs );

var ulcontent = $ ( ".list" );

for ( var i in obs . articlelist ){

var article = obs . articlelist [ i ];

var licontent = "<li id='" + article . articleId + "'>" + article . articleName + "</li>" ;

ulcontent . append ( licontent );
 }

上述为形成了一个ul、li的拼接

同时再次根据id获取它对应的内容

$ ( "li" ). mousemove ( function ( e ){

$ ( ".articleContent" ). show ();

$ ( ".articleContent" ). css ({ "left" :e . pageX , "top" :e . pageY });

var id = $ ( this ). attr ( "id" );

console . log ( e . pageX + "," + e . pageY );
                  //主要操作

for ( var i in obscache ){

var articleArray = obscache [ i ];

for ( var j in articleArray . articlelist ){

var article = articleArray . articlelist [ j ];

if ( article . articleId == id ){

$ ( ".articleContent" ). html ( article . articleContent );

break ;

}

}

}

});

$ ( "li" ). mouseleave ( function (){

$ ( ".articleContent" ). hide ();

});

实际大致使用情况如下所示：

ajax进行请求操作，得到我们拼接后的json字符串，然后再对json字符串进行解析处理显示。

效果如下图所示：

鼠标移动到上边显示，移开内容消失。