jquery与json结合返回集合结果集

1.jquery1.3

2.json-lib.2.2.3 需要以下第三方jar包(http://json-lib.sourceforge.net/)


   jakarta commons-lang 2.4
   jakarta commons-beanutils 1.7.0
   jakarta commons-collections 3.2
   jakarta commons-logging 1.1.1
   ezmorph 1.0.6
3.sevlet代码:
   TestBean tb=new TestBean();
   tb.setAddr("杭州西湖");
   tb.setName("wangdong");
   tb.setAge("27");
   TestBean tb2=new TestBean();
   tb2.setAddr("江西云中");
   tb2.setName("xiaoqiang");
   tb2.setAge("29");
 
 
   List list=new ArrayList();
   list.add(tb);
   list.add(tb2);
   JSONArray js = new JSONArray();
   JSONArray jr=js.fromObject(list);
   PrintWriter out = response.getWriter();
   out.print(jr);
   out.flush();
   out.close();
4.避免中文乱码,ajax只识别UTF-8编码
   response.setHeader("Cache-Control", "no-cache");
   response.setContentType("text/json;charset=UTF-8");
  
   request.setCharacterEncoding("UTF-8");
5.jsp代码
 function test(){
  $.getJSON(
   "/servlet/TestJson",
  function(data){
   //alert(data.length);
   //alert(data[0].name+""+data[0].addr);
   $('#users tbody').empty();
   for(var i=0;i<data.length;i++){
    $('#users tbody').append('<tr>' +
        '<td>' + data[i].name + '</td>' +
        '<td>' + data[i].age + '</td>' +
        '<td>' + data[i].addr + '</td>' +
        '</tr>');
   }
   /*$.each(data.items, function(i,item){
    alert(i);
    $('#users tbody').append('<tr>' +
       '<td>' + item.name + '</td>' +
       '<td>' + item.age + '</td>' +
       '<td>' + item.addr + '</td>' +
       '</tr>');
   });*/
  }
 );
}

 

$.get("<%=path%>/dept/deptsByType.htm",{"deptType":dept_type},function callback(data){
        document.all['form_deptId'].options.length = 0;  //清空原有的option
        var str=""; 
        var jsonData=eval('(' + data + ')'); //data为jsonArray string [{'GUID':123,'DEPT_NAME':分行}]
        for(var i=0;i<jsonData.length;i++){ 
       str+="<option value='"+jsonData[i].GUID+"'>"+jsonData[i].DEPT_NAME+"</option>" 
      }
        $("#form_deptId").html(str);
       });

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery是一个流行的JavaScript库,它简化了JavaScript编程的复杂性,并提供了许多实用的功能和工具。其中一个重要的功能是通过AJAX(Asynchronous JavaScript and XML)与服务器进行数据交互。 AJAX是一种在不刷新整个页面的情况下,通过后台与服务器进行异步通信的技术。它可以实现动态更新页面内容,提升用户体验。 在jQuery中,使用AJAX进行数据交互非常简单。其中,JSON(JavaScript Object Notation)是一种常用的数据格式,用于在客户端和服务器之间传输数据。 使用jQueryAJAX方法可以轻松地发送AJAX请求,并处理服务器返回JSON数据。以下是使用jQuery进行AJAX请求和处理JSON数据的基本步骤: 1. 使用$.ajax()方法发送AJAX请求,指定请求的URL、请求类型(GET、POST等)、数据等参数。 2. 在$.ajax()方法中使用success回调函数来处理服务器返回的数据。在这个回调函数中,可以对返回JSON数据进行解析和操作。 3. 在success回调函数中,可以使用jQuery提供的方法(如$.each())来遍历JSON数据,并将其展示在页面上或进行其他操作。 下面是一个简单的示例代码,演示了如何使用jQuery进行AJAX请求并处理返回JSON数据: ```javascript $.ajax({ url: 'example.com/api/data', type: 'GET', dataType: 'json', success: function(data) { // 处理返回JSON数据 $.each(data, function(index, item) { // 对每个数据项进行操作 console.log(item.name); }); } }); ``` 这个示例中,我们发送了一个GET请求到`example.com/api/data`,并期望返回的数据是JSON格式。在success回调函数中,我们使用$.each()方法遍历返回JSON数据,并打印每个数据项的名称。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值