JQuery+JSON+java学习实例

第一步：导入jquery中所需的js和css文件（css文件可根据自己需要进行更改）
<link type="text/css" href="css/jquery-ui-1.7.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>
第二步：将以下代码加入body中
 <h2 class="demoHeaders">Dialog</h2>
  <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all">
  <span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
             <div id="dialog" title="Dialog Title">
   <p>
   <form action="test_login.action" method="post" id="struts">
   <input type="text" id="mingzi" name="username" value="wenhao">
   <input type="text" id="nianling" name="password" value="wenhao">
   </form>
   </p>
  </div>
第二步：将以下代码加入head中
<script type="text/javascript">
$(function(){
// Dialog   
    $('#dialog').dialog({
     autoOpen: false,
     width: 600,
     modal: true,
     buttons: {
      "Ok": function() {
       getData(document.getElementById('mingzi').value,document.getElementById('nianling').value);
       //struts.submit();
       $(this).dialog("close");
      },
      "Cancel": function() {
       $(this).dialog("close");
      }
     }
    });
    
    // Dialog Link
    $('#dialog_link').click(function(){
     $('#dialog').dialog('open');
     return false;
    });
//hover states on the static widgets
    $('#dialog_link, ul#icons li').hover(
     function() { $(this).addClass('ui-state-hover'); },
     function() { $(this).removeClass('ui-state-hover'); }
    );
    
    
   });
function getData(str,str2){
        $("#list").html("");//清空列表中的数据
     //发送ajax请求
      $.getJSON(
      "json_data.jsp",//产生JSON数据的服务端页面
      {name:str,age:str2},//向服务器发出的查询字符串（此参数可选）
      //对返回的JSON数据进行处理，本例以列表的形式呈现
      function(json){
     //循环取json中的数据,并呈现在列表中
      $(json).each(function(i){
        $("#list").append("<li>name:"+json[i].name+"&nbsp; Age:"+json[i].age+"</li>")
      })
   })
}

</script>
<style type="text/css">
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
</style>

将json_simple.jar包引入到WEB-INF/lib中，json_data.jsp中的代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="org.json.simple.JSONObject"%>
<%
  String name=request.getParameter("name");
  String age=request.getParameter("age");
  JSONArray array = new JSONArray(); //声明JSON数组
  JSONObject objs = new JSONObject();
  objs.put("name",name);
  objs.put("age",age);
  array.add(objs);
  for(int i=0;i<10;i++){
    JSONObject obj = new JSONObject();
    obj.put("name","ants"+i);
    obj.put("age",24+i);
    array.add(obj);
  }
  out.print(array.toString());
%>