第一步：导入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+" 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());%>
本文来自博客，转载请标明出处：http://blog.csdn.net/lovexuwenhao/archive/2009/08/28/4494217.aspx
相关资源：java ajax json jquery完整实例