jquery_ajax_json简易事例 _JavaScript

jquery_ajax_json简易例子

package com.iss.servlet;

import org.json.JSONException;
import org.json.JSONObject;

import com.iss.pojo.User;
import com.iss.util.JSONUtil;

public class UserServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		
	    //list 添加对象
		List<User> userList = new ArrayList<User>();
		User user1 = new User("张三", "男", "18");
		User user2 = new User("李四", "男", "19");
		User user3 = new User("王五", "男", "20");
		userList.add(user1);
		userList.add(user2);
		userList.add(user3);
		PrintWriter out = response.getWriter();
		String str = null;
		try {
			//帐号密码如果匹配则把list 返回给界面
			if (request.getParameter("userName").equals("jquery") 
					&& request.getParameter("password").equals("ajax")) {
				str = JSONObject.quote(JSONUtil.toJSONString(userList));
			}
           
			out.print(str);
		} catch (JSONException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		System.out.println("str  "+str);
		out.flush();
		out.close();
	}


}

	<body>
		帐号 jquery 密码 ajax
		<form id="mainform">
			<ul>
				<li>
					帐号
					<input type="text" name="userName" />
				</li>
				<li>
					密码
					<input type="password" name="password" />
				</li>
				<li>
					<input onclick="login()" type="button" value="登录" />
				</li>
			</ul>
		</form>
		查询到的数据
		<div id="diva">

		</div>

		<script type="text/javascript">
           function login(){
           
           //获取form的参数 
            var args =$("#mainform").serialize();
            
            //调用 jquery 的json获取方法
             //三个参数分别为 ：请求路径  ，请求参数，返回数据的回调函数
            $.getJSON("servlet/UserServlet",args,function (data){
            if(data!=null){
             
              
             // 界面返回的是一个json格式字符串 调用JSON.parse()把数据转化为json
             // 格式的对象 
               
             var jsondata =JSON.parse(data);
             parseData(jsondata);
            }else{
             alert("帐号密码输入有误");
            }
            })
           }
           function parseData(data){
            var str="";
            //遍历json格式数据
            for (var key in data){
            str =str+" 用户"+data[key].userName+"   年龄"+data[key].age+"<br/>"
            alert(str);
            }
            //把数据添加到div中
           $("#diva").html(str);
           }
         </script>
	</body>

UserServlet 记得要导入工具类 JSONStringObject? JSONUtil

jsp 要导入? jquery.js和 json.js?

其实这都只是利用json工具类把字符串拼装为 json 格式而已不懂的可以去看下json格式。

附上工程

1 楼生死格斗 2011-11-29

谢谢