`

Jquery解析Json数据

jsonjQueryJavaScriptServletCache 
阅读更多

JSP文件

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'listUser.jsp' starting page</title>
   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->

   <script language="javascript" src="../js/jquery.js"></script>  
    <script language="javascript" src="../js/json.js"></script> 
   
   
    <script language="javascript">  
    function jsonview(){  
        $.getJSON("/userServlet",null,function call(data){  
         wirteHtml(data);  
     });
    }  
   
    function wirteHtml(data){   
 
        
        ////方法一
        /*
        var continents = data.users;  
       
        for(var i=0;i<continents.length;i++){   
                    
             var newLine = $("#planTable").length;
               
             var row = planTable.insertRow(newLine);  
            
             var col = row.insertCell(0);               
             col.innerHTML = continents[i].name;
               
             col = row.insertCell(1);  
             col.innerHTML = continents[i].age;  
            
             col = row.insertCell(2);  
             col.innerHTML = continents[i].tel;  
        }
        */
       
       
        //方法二
        var list = data.users;
        //alert(list.length);
       
        
        $.each(list, function(i, u){
         
         var row = $("#template_0").clone();
         row.find("#name").text(u.name);
         row.find("#age").text(u.age);
         row.find("#tel").text(u.tel);
         row.find("#address").text(u.address.province+u.address.city+u.address.country);
         
         
         row.appendTo("#planTable");

         
        }); 
       
    }   
    
            
</script>


  </head>
 
  <body>
   
   
    <input type="button" value="JsonView" onClick="jsonview();">  
   
    <div id="dateMessage">  
        <table id="planTable" border="1">  
         <thead>
             <td>Name</td>
             <td>Age</td>
             <td>Tel</td>
             <td>Address</td>
            </thead>  
           
            <tbody id="template">
            <tr id="template_0">
             <td id="name"></td>
             <td id="age"></td>
             <td id="tel"></td>
             <td id="address"></td>
            </tr>  
            </tbody>
           
        </table>  
    </div>
   

    <input type="button" value="Get Xml" onclick="getXml();">  
    
  </body>
</html>

 

Java文件

 

package com.zj.user.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import com.zj.user.bean.Address;
import com.zj.user.bean.Userinfo;

 

public class UserServlet extends HttpServlet {

 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  this.doPost(req, resp);
 }

 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  
  
     resp.setContentType("text/xml;charset=utf-8");
     resp.setHeader("Cache-Control","no-cache");
    

     //跨域

     String callback = request.getParameter("callback");


     JSONObject json = new JSONObject();  

    
     try{
      
      Userinfo user1=new Userinfo();
      user1.setAddress(new Address("广东省","广州市","天河区"));
      user1.setName("张三");
      user1.setTel("13711486870");
      user1.setAge(22);
      
      Userinfo user2=new Userinfo();
      user2.setAddress(new Address("广西省","南宁市","南区"));
      user2.setName("李四");
      user2.setTel("13711485470");
      user2.setAge(32);
      
      Userinfo user3=new Userinfo();
      user3.setAddress(new Address("湖北省","武汉市","洪山区"));
      user3.setName("王五");
      user3.setTel("1371854786870");
      user3.setAge(28);
      
      List list=new ArrayList();
      list.add(user1);
      list.add(user2);
      list.add(user3);
      
      
      try {
       
       //取集合
    JSONArray jsonArray = JSONArray.fromObject(list);
 
    JSONObject jsobjcet = new JSONObject();
    
    jsobjcet.put("users", jsonArray);
    
    response.getWriter().write(callback+"("+jsobjcet.toString()+");");


    System.out.println(jsobjcet.toString());
    
   } catch (IOException e) {
    e.printStackTrace();
   }
   

    

  
 }

 
}

 

注意

要加入的jar包

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

 

完整实例请参考附件

 

 

分享到：
| javascript面向对象技术基础(六)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    用jquery解析JSON数据的方法

    用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里...

    用jquery解析JSON数据的方法20110227

    在JavaScript和jQuery中，解析JSON数据是常见的任务，特别是在与服务器进行异步通信时。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成。在jQuery中...

    Jquery解析Json数据，实现级联菜单

    本主题将深入探讨如何使用jQuery解析JSON数据并实现级联菜单，这在构建动态和交互性强的用户界面时非常常见。级联菜单通常用于导航，其中下拉选项根据上一个选项的选择而变化，提供更具体的子类别。 首先，让我们...

    jquery解析JSON数据的方法.docx

    在JavaScript和jQuery中，解析JSON数据是常见的任务，特别是在与服务器进行异步通信时。JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，它使得人和机器都能容易地读取和写入数据。当jQuery从服务器...

    Jquery解析json数据详解

    最近被jquery折磨了一番，倒腾了一个jquery解析json的demo,本demo想实现从asp.net后台实例化dataSet或者dataTable数据集，将dataSet转换成json并返回给客户端，客户端用jquery getJson方法解析出来并显示在页面上。...

    Jquery解析json

    6. **前端jQuery解析JSON数据** #### JSON介绍 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON格式基于JavaScript的一个子集，但JSON是独立于...

    jQuery读取json数据

    关于"jQuery读取json数据"这个主题，我们将会深入探讨如何利用jQuery的Ajax功能来高效地加载和解析JSON格式的数据，以及这样做带来的优势。 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于...

    jQuery解析json数据实例分析

    本文主要介绍了如何利用jQuery解析JSON数据，并通过实例详细阐述了在前端页面中利用jQuery处理从服务器端通过Servlet返回的JSON格式数据的具体方法。以下将结合提供的内容，具体介绍相关的知识点： 1. JSON数据格式...

    Jquery.json.js

    jQuery提供了方便的方法来处理JSON数据，包括`$.getJSON()`和`$.ajax()`等函数，可以方便地从服务器获取JSON数据并将其转化为JavaScript对象，或者将JavaScript对象转换为JSON字符串发送到服务器。 **jQuery的get...

    深入分析jquery解析json数据

    在深入分析jQuery解析JSON数据之前，我们首先要了解JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成。JSON基于JavaScript的一个子集，因此它和...

    jquery解析JSON数据示例代码

    这里可以找到json.js的代码，后面还需要formutil.js的代码及MD5.js 用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式...

    使用JQUery解析JSON字符串

    在IT行业中，JavaScript库jQuery是前端开发中...以上就是关于“使用jQuery解析JSON字符串”这一主题的详细讲解，涵盖了JSON的基础知识、jQuery的解析方法以及动态更新DOM的内容。希望对您在实际项目中的应用有所帮助。

    jquery解析json格式数据的方法(对象、字符串)

    一、jQuery解析Json数据格式： 使用这种方法，你必须在Ajax请求中设置参数: dataType: “json” 获取通过回调函数返回的数据并解析得到我们想要的值，看源码： jQuery.ajax({ url: full_url, dataType: json, ...

    jquery实现json数据填充到table表格中并且实现remove add 数据

    在JavaScript或jQuery代码中，我们可以通过`$.getJSON()`方法来获取服务器端的JSON数据。成功获取数据后，遍历JSON数组，使用`append()`方法将每一项数据转化为`&lt;tr&gt;`元素并插入到表格中。例如： ```javascript $....

    jquery获取json数据的并分页案例

    本案例将深入探讨如何使用jQuery来获取JSON数据并实现分页功能，这对于网页应用的数据展示至关重要。 首先，理解JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于...

    4级级联菜单JQUERY+JSON版

    4. **jQuery处理**：在页面加载完成后，使用jQuery解析JSON数据，并根据数据动态生成DOM元素。例如，遍历JSON对象，创建对应的li元素，然后将其添加到对应的ul元素中。 5. **事件绑定**：监听用户的鼠标事件，当...

    jQuery树状json数据转表格插件.zip

    1. **解析JSON**：插件首先需要解析输入的JSON数据，提取出节点信息，包括键值对和嵌套结构。 2. **构建表格**：解析后的数据会被用来生成HTML表格，每一级节点对应一行，父节点和子节点通过折叠/展开按钮进行连接。...

Magicbox
Global site tag (gtag.js) - Google Analytics