zoukankan      html  css  js  c++  java
  • ajax异步获取请求,获得json数组后对数组的遍历

    如果响应数据是以html的形式发出来的,即

    response.setContentType("text/html;charset=utf-8");

    那么一般用下面这种方式,但是要注意用eval()函数将responseText转换成一个json表达式,如下标红代码

     1 //创建回调函数,根据相应状态动态更新页面
     2   var xhr = getXMLHttpRequest();    //创建XMLHttpRequest对象
     3 
     4   //通过实践调用回调函数处理相应结果
     5   xhr.onreadystatechange = function(){
     6 
     7     if(xhr.readyState == 4){
     8         if(xhr.status == 200){
     9             var str = xhr.responseText;
    10 
    11             //将str强制转换成一个表达式
    12             str = eval(xhr.responseText);
    13             for(var i = 0; i < str.length; i++){
    14                 var option = "<option>"+str[i].name+"</option>";
    15                 $("#select").append(option);
    16             }
    17         }
    18     }
    19   }
    20 
    21   //与服务器建立连接
    22   xhr.open("get", "${pageContext.request.contextPath}/provinceServlet");
    23 
    24   //发送请求
    25   xhr.send(null);

    当然,这里获取到json表达式,后可以jquey方式遍历,如下标红代码

     1 //创建回调函数,根据相应状态动态更新页面
     2   var xhr = getXMLHttpRequest();    //创建XMLHttpRequest对象
     3 
     4   //通过实践调用回调函数处理相应结果
     5   xhr.onreadystatechange = function(){
     6 
     7     if(xhr.readyState == 4){
     8         if(xhr.status == 200){
     9             var str = xhr.responseText;  
    10             //将str强制转换成一个表达式
    11             str = eval(xhr.responseText);
    12          
    13             $(str).each(function(){
    14                 var option = "<option>"+this.name+"</option>";
    15                 $("#select").append(option);
    16             });
    17         }
    18     }
    19   }
    20 
    21   //与服务器建立连接
    22   xhr.open("get", "${pageContext.request.contextPath}/provinceServlet");
    23 
    24   //发送请求
    25   xhr.send(null);

    如果后台响应的是以application/json方式发出的,即

    response.setContentType("application/json;charset=utf-8")

    那么运用jquery可以进一步简化代码,代码如下:
    1  $.get("provinceServlet", {}, function(data){
    2        $(data).each(function(){
    3           var option = "<option>"+this.name+"</option>" ;
    4           $("#select").append(option);
    5        });
    6    });

    顺便提一句:

    将普通对象封装成json的方法是JSONOject.fromObject(obj).toString();

    如果是将list对象封装成json,那么方法是JSONArray.fromObject(list).toString();

  • 相关阅读:
    自己定义button
    Google C++ style guide——格式
    杭电1018-Big Number(大数)
    AnyForWeb告诉你什么才是“最好的”编程语言
    Android广播机制分析
    nyoj Wythoff Game(暴力枚举)
    基础搜索入门(二)
    1.1、Libgdx目标和特性
    我在农业2.0的互联网创业思考 (1)
    Python演绎的精彩故事(二)
  • 原文地址:https://www.cnblogs.com/hi3254014978/p/11721053.html
Copyright © 2011-2022 走看看