ajax 对 Json 格式的解析

最新推荐文章于 2023-03-02 10:59:40 发布

P_Doraemon

最新推荐文章于 2023-03-02 10:59:40 发布

阅读量700

点赞数

分类专栏：技能升华文章标签： ajax json

技能升华专栏收录该内容

6 篇文章

订阅专栏

本文介绍了JSON的基本概念及其在Web应用程序中的使用方法，包括如何利用JavaScript处理简单的JSON数据及复杂的对象数组，还提供了具体的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：http://blog.youkuaiyun.com/asia_kobe/article/details/50504279

Json 的介绍：

JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。

按照最简单的形式，可以用下面这样的 JSON 表示名称/值对：

{ “firstName”: “Brett” }

这样的键/值对也可以是多个：

{“name”:”aaa”,”sex”:”男”,”age”:”20”}
从语法方面来看，这与名称/值对相比并没有很大的优势，但是在这种情况下 JSON 更容易使用，而且可读性更好。

值的数组

当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性。

如果使用 JSON，就只需将多个带花括号的记录分组在一起：

{ “people”: [
{ “firstName”: “Brett”, “lastName”:”McLaughlin”, “email”: “111111” },
{ “firstName”: “Jason”, “lastName”:”Hunter”, “email”: “22222” },
{ “firstName”: “Elliotte”, “lastName”:”Harold”, “email”: “33333” }
]}

可以使用相同的语法表示多个值（每个值包含多个记录）：

{ “programmers”: [
{ “firstName”: “Brett”, “lastName”:”McLaughlin”, “email”: “3333” },
{ “firstName”: “Jason”, “lastName”:”Hunter”, “email”: “1222” },
{ “firstName”: “Elliotte”, “lastName”:”Harold”, “email”: “3333” }
],
“authors”: [
{ “firstName”: “Isaac”, “lastName”: “Asimov”, “genre”: “science fiction” },
{ “firstName”: “Tad”, “lastName”: “Williams”, “genre”: “fantasy” },
{ “firstName”: “Frank”, “lastName”: “Peretti”, “genre”: “christian fiction” }
],
“musicians”: [
{ “firstName”: “Eric”, “lastName”: “Clapton”, “instrument”: “guitar” },
{ “firstName”: “Sergei”, “lastName”: “Rachmaninoff”, “instrument”: “piano” }
]
}

Json也可以这样写：

{ "listaccountsresponse" : { "count":1 ,"account" : [ {"id":5,"name":"xian1","accounttype":0,"domainid":2,"domain":"Server","receivedbytes":649444,"sentbytes":175467975,"vmlimit":"20","vmtotal":2,"vmavailable":"18","iplimit":"20","iptotal":1,"ipavailable":"19","volumelimit":"20","volumetotal":2,"volumeavailable":"18","snapshotlimit":"20","snapshottotal":0,"snapshotavailable":"20","templatelimit":"20","templatetotal":0,"templateavailable":"20","vmstopped":0,"vmrunning":2,"state":"enabled","user":[{"id":5,"username":"xian1","firstname":"Eric","lastname":"Tang","email":"Wang-Ngai.Tang@pccw.com","created":"2012-03-22T09:36:44+0800","state":"enabled","account":"xian1","accounttype":0,"domainid":2,"domain":"Server","timezone":"Asia/Shanghai"}]} ] } }

ajax对Json格式数据的解析 ：

1.对简单json格式的解析：

{ “firstName”: “Brett” }

写道

$.ajax({
url:”这里是你要请求的地址”,
data:{“id”:id}, //以键/值对的形式
async : false,
dataType : “json”,
success : function(data) {
alert(“firstName = ” + data.firstName);
}
});

注：这里的data是你从后台穿过来的Json字符传串。

后台写法：

Java代码

response.setCharacterEncoding(”utf-8”);
response.setContentType(”text/json;charset=UTF-8”);
PrintWriter out = null;
String count = ”<span style=”color: #000000;“>{ ”firstName“: ”Brett” }</span>
;
try {
out = response.getWriter();
} catch (Exception e) {
e.printStackTrace();
}
out.print(count);
out.flush();

这样就能在前台页面弹出提示框：firstName = Brett。

2.多个键/值对和上面的情况一样

3.解析Json如下数组：

{

{ “firstName”: “Brett”, “lastName”:”McLaughlin”, “email”: “111111” },
{ “firstName”: “Jason”, “lastName”:”Hunter”, “email”: “22222” },
{ “firstName”: “Elliotte”, “lastName”:”Harold”, “email”: “33333” }
}

Js代码

$.ajax({
url:”这里是你要请求的地址”,
data:{”id”:id}, //以键/值对的形式
async : false,
dataType : ”json”,
success : function(data) {
for(int i = 0; i < data.length; i++) { //循环后台传过来的Json数组
var datas = data[i];
alert(datas.firstName);
alert(datas.lastName);
alert(datas.email);
}
}
});

4.解析如下Json数据

Js代码

$.ajax({
url:”这里是你要请求的地址”,
data:{”id”:id}, //以键/值对的形式
async : false,
dataType : ”json”,
success : function(data) {
var pro = data.programmers; // pro为programmers的一个数组
for(int i = 0; i < pro.length; i++) { //循环后台传过来的Json数组
var datas = pro[i];
alert(pro.firstName);
alert(pro.lastName);
alert(pro.email);
}
var aut = data.authors; // aut为authors的一个数组
for(int i = 0; i < aut.length; i++) { //循环后台传过来的Json数组
var datas = aut[i];
alert(aut.firstName);
alert(aut.lastName);
alert(aut.genre);
}
var mus = data.musicians; // aut为authors的一个数组
for(int i = 0; i < mus.length; i++) { //循环后台传过来的Json数组
var datas = mus[i];
alert(mus.firstName);
alert(mus.lastName);
alert(mus.instrument);
}
}
});

Js代码

$.ajax({
url:”这里是你要请求的地址”,
data:{”id”:id}, //以键/值对的形式
async : false,
dataType : ”json”,
success : function(data) {
var accounts = data.listaccountsresponse.account; //取到“account”中的数据
for(int i = 0; i < accounts.length; i++) { //循环后台传过来的Json数组
var datas = accounts[i];
alert(datas.id);
alert(datas.name);
alert(datas.accounttype);
……….
}
}
});

—–这里是自己写的一个后台传值———————————————————————————————————-

Js代码

@RequestMapping(value=”/applyVm/listApplyVmCount”, method={RequestMethod.GET, RequestMethod.POST})
public void listApplyVmCount(HttpServletRequest request, HttpServletResponse response) {
response.setCharacterEncoding(”utf-8”);
response.setContentType(”text/json;charset=UTF-8”);
PrintWriter out = null;
String count = ”“;
try {
out = response.getWriter();
Map<String, Integer> map = applyVmService.findApplyVmCount();
Gson gson = new Gson();
count = gson.toJson(map);
} catch (Exception e) {
e.printStackTrace();
}
out.print(count);
out.flush();
}

document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)

    <div id="digg" articleid="50504279">
        <dl id="btnDigg" class="digg digg_enable" onclick="btndigga();">

             <dt>顶</dt>
            <dd>0</dd>
        </dl>


        <dl id="btnBury" class="digg digg_enable" onclick="btnburya();">

              <dt>踩</dt>
            <dd>0</dd>               
        </dl>

    </div>
 <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank">&nbsp;</a>   </div>
<div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank">&nbsp;</a></div>
<script type="text/javascript">
            function btndigga() {
                $(".tracking-ad[data-mod='popu_222'] a").click();
            }
            function btnburya() {
                $(".tracking-ad[data-mod='popu_223'] a").click();
            }
        </script>

上一篇深入浅出Mybatis系列（九）-强大的动态SQL
下一篇Jquery ajax方法解析返回的json数据

<div style="clear:both; height:10px;"></div>


        <div class="similar_article">
                <h4></h4>
                <div class="similar_c" style="margin:20px 0px 0px 0px">
                    <div class="similar_c_t">
                      &nbsp;&nbsp;相关文章推荐
                    </div>

                    <div class="similar_wrap tracking-ad" data-mod="popu_36" style="max-height:195px;">                       
                        <ul class="similar_list fl">    
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.youkuaiyun.com/hulefei29/article/details/3345053" title="Ajax中XML和JSON格式的优劣比较" strategy="" target="_blank" style="width: 290px;">Ajax中XML和JSON格式的优劣比较</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://dreams75.iteye.com/blog/512554" title="原生AJAX或jQuery实现二级联动选择以及解析XML和JSON数据格式" strategy="" target="_blank" style="width: 290px;">原生AJAX或jQuery实现二级联动选择以及解析XML和JSON数据格式</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.youkuaiyun.com/dainiao01/article/details/2471965" title="基于JSON格式报文的AJAX通用实现" strategy="" target="_blank" style="width: 290px;">基于JSON格式报文的AJAX通用实现</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.youkuaiyun.com/wk206612776/article/details/36503367" title="js/jquery解析json和数组格式的方法介绍" strategy="" target="_blank" style="width: 290px;">js/jquery解析json和数组格式的方法介绍</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://baihe747.iteye.com/blog/2167169" title="js解析文本数据  xml格式数据,json数据和ajax和servlet交互乱码解决" strategy="" target="_blank" style="width: 290px;">js解析文本数据  xml格式数据,json数据和ajax和servlet交互乱码解决</a>
                               </li>
                        </ul>
                          <ul class="similar_list fr">      
                               <li>
                                   <em>•</em>
                                   <a href="http://film.iteye.com/blog/254911" title="extjs ajax方式前后台数据传送(json格式)" strategy="" target="_blank" style="width: 290px;">extjs ajax方式前后台数据传送(json格式)</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.youkuaiyun.com/liujiahan629629/article/details/17332297" title="AJAX——JSON数据格式" strategy="" target="_blank" style="width: 290px;">AJAX——JSON数据格式</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://barabbas.iteye.com/blog/1773564" title="JSON格式解析 ." strategy="" target="_blank" style="width: 290px;">JSON格式解析 .</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://blog.youkuaiyun.com/caozhi01/article/details/3414196" title="ajax打印对象时,转换由java对象转为Json格式的String时遇到的Hibernate问题" strategy="" target="_blank" style="width: 290px;">ajax打印对象时,转换由java对象转为Json格式的String时遇到的Hibernate问题</a>
                               </li>
                               <li>
                                   <em>•</em>
                                   <a href="http://yang7527.iteye.com/blog/768401" title="extjs ajax方式前后台数据传送(json格式 " strategy="" target="_blank" style="width: 290px;">extjs ajax方式前后台数据传送(json格式 </a>
                               </li>
                        </ul>
                    </div>
                </div>
            </div>