zoukankan      html  css  js  c++  java
  • json在项目中的应用大总结

    一、摘要

       刚开始接触json的时候,那时候还不太清楚json到底是个什么东西,然后就在项目中使用了它。因为没有搞明白json的本质,所以刚开始使用json的时候走了不少弯路。这次总结一些json的知识,总结主要是想梳理一下自己使用json的一些应用场景,让自己对json有一个更深刻的认识,以后在项目中可以更加熟练的应用它。

    二、总结:

    1.json在前端中的应用:

    a)ajax+json使用场景:

    ajax处理登录验证信息  解析json格式的String类型对象和ajax获得服务端的响应数据的方式request.responseText

     评论处理,用ajax将表单的数据提交给服务端,客户端解析从服务端传过来的json格式的List类型的数据:

    用ajax来获取服务器端的数据,如果从服务器传到前端的数据都是JSON的字符串形式,在前端要读取数据,需要先将字符串转化成json格式的对象。

    js中的eval()函数就是将json格式的字符串转化为json格式的对象。

    刚开始学习的时候首先学的是原生的ajax,还没有学习jquery(jquery中的ajax更方便),在项目中就用上面的原生的ajax来和服务器进行交互。当前端需要像后台异步请求大量的数据时,必须要有一个方法让我们可以将这些数据方便的从后台传到前端,比如后台要传给前端的数据是一个数组类型的,后台通过相应的方法将这个数组类型的数据转化成json格式的字符串,然后再传给前端,前端为了将从后台获取到的json格式的字符串的内容一个个显示在对应的位置,就需要先将该json格式的字符串转化成json对象(eval函数,实际项目中应该避免使用eval),然后才能一个个的将数据读取出来(第二张图中遍历获取到的后台数据)。

    刚开始如果对json不熟悉,可能会遇到不知道如何读取从后台传到前端的json格式的字符串的情况。这个时候就要搞清楚json的概念。(要在实际中应用json,要掌握json格式数据的写法以及如何读取json格式的数据)。

    2.json基础:

    a)了解json概念:

    b)了解json语法:

    地址:http://www.w3school.com.cn/json/json_syntax.asp

     1.json值:

    2.json对象写法:{ "firstName":"John" , "lastName":"Doe" }
    3.json数组写法(可包含多个json对象):
    var employees = [
    { "firstName":"Bill" , "lastName":"Gates" },
    { "firstName":"George" , "lastName":"Bush" },
    { "firstName":"Thomas" , "lastName": "Carter" }
    ];

    读取json数组的方式:
    employees[0].lastName;//获取第一项json对象的lastName属性的值
    for(var i=0;i<employees.length;i++){//js中遍历json数组中的所有的值
    alert( employees[i].firstName);
      alert( employees[i].lastName);
    }

    var a={
    "employees": [
    { "firstName":"John" , "lastName":"Doe" },
    { "firstName":"Anna" , "lastName":"Smith" },
    { "firstName":"Peter" , "lastName":"Jones" }
    ]
    }
    a.employees[0].lastName;//获取employees第一项json对象的lastName属性的值

    c)搞清楚json对象和json字符串的区别(后面总结)

    3.jquery中的ajax+json(项目中用的最多的):
    学了jquery之后,实际应用中经常用的当然是用jquery中的ajax来向服务器发送请求了

    a)jquery的ajax基础用法:
    获取表单信息,并将该信息传给服务器,服务器像前端返回json数组对象,前端获取之后读取该json数组对象(图片中描述不准确,补充:返回的是对象就可以直接遍历)
    表单数据少时,可以采用直接像下面这样获取表单数据之后传递给服务器
    实例一:

    实例二:服务器只向前端传了一个数值类型的数据(直接输出data就可以得到该值,因为json的值可以是数值,用data[0]一样可以的得到)

    b)复杂一点的用法

    1) 当表单数据多时,就需要拼接数据。

    先将表单序列化(红框部分,序列化后的表单返回的对象是一个json数组对象可以通过遍历得到每个控件的属性名和其对应的属性值,表单的每个控件里面都要写有name 和value属性值,不然不能像下面这样读取到),然后将所有的值拼接成我们实际需要的json格式的对象。

    ajax部分:

    补充:

    jquery中的序列化表单的方法:http://www.studyofnet.com/news/647.html

    2)当表单数据多时,对数据的处理方法二

    和上面第一种方法一样,当表单数据多时我们需要对每个属性及其对应的属性值进行拼接,这样拼会很麻烦。

    下面用tojson方法来将表单数据转化为json对象也是不错的选择,这样不用将属性名写在控件中,直接在js中写也方便检查错误。

    tojson方法需要导入jQuery-json库(toJSON学习地址:http://www.cnblogs.com/haogj/archive/2011/12/01/2271098.html)

     以上主要总结了如何获取表单中的值,然后将获取到的值传给服务器。当表单数据比较多时,又如何简单的将表单的值转化成json格式的数据,然后将其值传给服务器。在json的基础知识中总结了一下,读取json格式(对象)数据的方法

    再来系统总结一下,json字符串与json对象的区别从而总结清楚如何读取从服务器传到前端的数据:

    1.先了解json字符串与json对象的本质区别,学习地址:json字符串与json对象的本质区别

    2.再系统了解一下json字符串如何转json对象,json对象如何转json字符串,学习地址:JSON.stringify()和JSON.parse()

    (http://www.soso.io/article/25001.html)

    实例一:

    未更完待完善

  • 相关阅读:
    HTTP响应状态码
    跨域
    第一章-极限与函数
    离群点检测
    关联规则(初识)
    python分类预测模型的特点
    分类预测算法评价(初识)
    人工神经网络(初识)
    决策树(初识)
    挖掘建模
  • 原文地址:https://www.cnblogs.com/yy95/p/5621721.html
Copyright © 2011-2022 走看看