javascript-ajax-json-java-servlet互相传值取值的学习心得 -

ding43930053

浏览: 39532 次

最近访客更多访客>>

Aizen

Smiling_boy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript-ajax-json-java-servlet互相传值取值的学习心得

前几天突然想学习以下jquery easyui 但是里面涉及到了json的知识，于是恶补起来ajax知识，经过以上的查资料，终于弄清楚javascript-ajax-json-java-servlet互相传值取值,的过程，特此分享出来，希望能帮助到初学的朋友么，也为了日后自己查询是使用，好了闲话少说，看下面代码go！！

使用tomcat6.0

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</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">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="jquery-easyui-1.2.3/json.js"></script>
	<script type="text/javascript">
		//创建XMLHttpRequeset对象，这个对象是ajax的核心对象
		function createXMLHttp(){
			var xmlhttp;   
			try{
				xmlhttp=new XMLHttpRequest();
			}catch(e) {
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			return xmlhttp;
		}
		
		//使用Ajax
		function ajaxSubmit(){
			var xmlhttp=createXMLHttp();
			
			xmlhttp.onreadystatechange=function(){
				if(4==xmlhttp.readyState){
					if(200==xmlhttp.status){
						//获取从服务器端传过来的Text文本
						alert(xmlhttp.responseText)
						
						//获取从服务器端传过来的Text文本，并使用JSON的parseJSON函数将文本转换为javascript对象
						var myobj = xmlhttp.responseText.parseJSON(); 
						//遍历javascript对象
						for (i = 0; i < myobj.programmers.length; i++) { 
								alert(myobj.programmers[i].lastName);
							} 
					}else {
						alert("no");
					}
				}
			}
			
			//使用标准json格式数据，创建javascript对象
			var people = { "programmers": [    
						{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },    
						{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },    
						{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }   
						], 
						"authors": [    
						{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },    
						{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },    
						{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }   
						], "musicians": [    
						{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },    
						{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }   
						] 
					} 
			
			//使用使用JSON的toJSONString函数将javascript对象转换为文本
			var value = people.toJSONString();
			//象服务器端传文本
			xmlhttp.open("post","UserServlet?json="+value,true); 
			xmlhttp.send(null);
			return null;
		}

	</script>
  </head>
  
  <body>
    <form action="UserServlet" method="post">
    	<input type="text" name="username" />
    	<input type="button" onclick="ajaxSubmit();"value="提交"/>
    </form>
   
  </body>
</html>

UserActionServlet.java

package action;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class UserActionServlet extends HttpServlet{

	@Override
	public void service(HttpServletRequest arg0, HttpServletResponse arg1)
			throws ServletException, IOException {
		//System.out.println(arg0.getParameter("json"));
		PrintWriter writer = arg1.getWriter();
		//将从javascript传过来的文本读取到，然后在将文本传回到客户端
		writer.print(arg0.getParameter("json"));
		writer.flush();
		writer.close();
	}
	
}

接下来配置web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
  	<servlet-name>UserServlet</servlet-name>
  	<servlet-class>action.UserActionServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>UserServlet</servlet-name>
  	<url-pattern>/UserServlet</url-pattern>
  </servlet-mapping>
</web-app>

分享到：