jQuery+JSON的简单应用

最新推荐文章于 2024-10-01 20:12:28 发布

lgq_0714

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量480

点赞数

文章标签： jquery json jobs function button exception

本文链接：https://blog.csdn.net/lgq_0714/article/details/7448797

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery下载地址：http://docs.jquery.com/Downloading_jQuery

JSON包下载地址：http://ishare.iask.sina.com.cn/f/23793750.html

首先是UserTestServlet：

package com.liu;

import java.io.IOException;

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;

public class UserTestServlet extends HttpServlet {

	private static final long serialVersionUID = -4844390377544610172L;

	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		resp.setContentType("text/html;charset=UTF-8");
		resp.setHeader("Cache-Control", "no-cache");
		JSONObject json = new JSONObject();
		try {
			JSONArray members = new JSONArray();
			for (int i = 0; i < 10; i++) {
				JSONObject member = new JSONObject();
				
				member.put("name", "张小" + i);
				member.put("age", "28");
				member.put("email", "test@test.com");
				members.add(i, member);
			}
			json.put("jobs", members);
		} catch (Exception e) {
			e.printStackTrace();
		}
		System.out.println(json.toString());
		resp.getWriter().write(json.toString());

	}

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

}

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
		
	<servlet>
		<servlet-name>UserTest</servlet-name>
		<servlet-class>com.liu.UserTestServlet</servlet-class>
	</servlet>
	
	<servlet-mapping>
		<servlet-name>UserTest</servlet-name>
		<url-pattern>/UserTest</url-pattern>
	</servlet-mapping>
	
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

测试页面：

<%@ page language="java" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>jQuery+JSON</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">
		<script src="jquery-1.4.2.js"></script>
	</head>
	<script>
  	function test()
  	{
  		$.ajax({
		   type: "POST",
		   url: "UserVlidate",
		   data: "name=John",
		   success: function(msg){
		     alert( "Data Saved: " + msg );
		   }
		 });
  	}
  	
  	function testJson()
  	{
  		$.ajax({
		   type: "POST",
		   url: "UserTest",
		   data: "name=John",
		   success: function(msg){
		   		eval("data="+msg);   
		   		var jobs = data.jobs;
		   		var name = "";
		   		for(var i=0; i<jobs.length; i++)
		   		{
		   			name+=jobs[i].name+","+jobs[i].age+","+jobs[i].email+"\n";
		   		}
             	alert(name);
        	}   
		 });
  	}
  </script>

	<body>
		<input type="button" οnclick="test()" value="jQuery测试" />
		<input type="button" οnclick="testJson()" value="jQuery+JSON测试" />
	</body>
</html>