您的位置：首页 > Web前端 > JQuery

jQuery+JSON的简单应用

2012-04-11 11:31 423 查看
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" onclick="test()" value="jQuery测试" />
<input type="button" onclick="testJson()" value="jQuery+JSON测试" />
</body>
</html>

 
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                jquery
                                                json
                                                jobs
                                                function
                                                button
                                                exception
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航