struts-jquery-ajax

最新推荐文章于 2021-08-06 16:23:12 发布

Tomsheng321

最新推荐文章于 2021-08-06 16:23:12 发布

阅读量338

点赞数

分类专栏： JS jquery struts2

JS 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

jquery

10 篇文章 0 订阅

订阅专栏

struts2

9 篇文章 0 订阅

订阅专栏

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">

  <servlet>
    <servlet-name>TimeServlet</servlet-name>
    <servlet-class>cn.itcast.javaee.js.time.TimeServlet</servlet-class>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>TimeServlet</servlet-name>
    <url-pattern>/servlet/TimeServlet</url-pattern>
  </servlet-mapping>
 </web-app>

time.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>取得服务端当前时间</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <body>
	
	当前时间：<span id="time"></span><br/>
	<input type="button" value="获取时间"/>

	<script type="text/javascript">
		$(":button").click(function(){
			//参数一:发送的路径
			var url = "${pageContext.request.contextPath}/servlet/TimeServlet?time="+new Date().getTime();
			//参数二:以JSON文本书写的发送的参数
			var sendDate = {
				"name" : "哈哈",
				"sal"  :  6000
			};
			//参数三:回调函数
			$("#time").load(url,sendDate,function(backData,textStatus,xmlHttpRequest){
				//回调函数中参数一：backData表示返回的数据，它是js对象
				//回调函数中参数二：textStatus表示返回状态的文本描述，例如：success，error，
				//回调函数中参数三：xmlHttpRequest表示ajax中的核心对象
				//alert("backData=" + backData);//它是一个js对象
				//alert("textStatus=" + textStatus);
				//alert("xmlHttpRequest=" + xmlHttpRequest.readyState);
				//alert("xmlHttpRequest=" + xmlHttpRequest.status);
				//alert("xmlHttpRequest=" + xmlHttpRequest.responseText);//它是一个字符串
				//项目中只需要使用backDate即可				
			});
			
							
			//$("#time").load(url,sendDate);
			//$("#time").load(url);
		});
	</script>
	
  </body>
</html>

TimeServlet.java

package cn.itcast.javaee.js.time;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 取得服务端当前时间
 * @author AdminTC
 */
public class TimeServlet extends HttpServlet {
	
	public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		System.out.println("POST");
		String name = request.getParameter("name");
		String sal = request.getParameter("sal");
		System.out.println(name+":"+sal);
		
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		String str = sdf.format(new Date());
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write(str);
		pw.flush();
		pw.close();
	}
}

输出结果：

======================================================================================================================

检查注册用户名和密码是否存在

02_register.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>检查注册用户名和密码是否存在</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <body>
	
	<!-- 
		在异步提交的方式下，form标签的action和method属性没有意义
	-->
	<form action="01_time.jsp" method="GET">
		<table border="2" align="center">
			<tr>
				<th>用户名</th>
				<td><input type="text" name="username"/></td>
			</tr>
			<tr>
				<th>密码</th>
				<td><input type="password" name="password"/></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="button" value="检查" style="width:111px"/>
				</td>
			</tr>
		</table>
	</form>
	
	<span></span>
	
	
	<script type="text/javascript">
		$(":button").click(function(){
			var username = $(":text").val();//哈哈
			var password = $(":password").val();//123
			var url = "${pageContext.request.contextPath}/servlet/UserServlet?time="+new Date().getTime();
			/*手工写JSON文本
			var sendData = {
				"username" : username,
				"password" : password
			};
			*/
			var sendData = $("form").serialize();
			$.post(url,sendData,function(backDate){
				//backDate：
				//如果服务器返回html，即backDate就是string，不要解析
				//如果服务器返回json，即backDate就是object，要解析	
				//如果服务器返回xml，即backDate就是object，要解析	
				var $img = $("<img src='"+backDate+"' width='14px' height='14px'>");
				$("span").text("");
				$("span").append($img);
			});
		});
	</script>
	
  </body>
</html>

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">
<servlet>
    <servlet-name>UserServlet</servlet-name>
    <servlet-class>cn.itcast.javaee.js.user.UserServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>UserServlet</servlet-name>
    <url-pattern>/servlet/UserServlet</url-pattern>
  </servlet-mapping>
</web-app>

UserServlet.java

package cn.itcast.javaee.js.user;

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;

/**
 * 检查注册用户名和密码是否存在
 * @author AdminTC
 */
public class UserServlet extends HttpServlet {
	public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String username = request.getParameter("username");//哈哈
		String password = request.getParameter("password");//123
		String tip = "images/MsgSent.gif";
		if("哈哈".equals(username) && "123".equals(password)){
			tip = "images/MsgError.gif";
		}
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write(tip);
		pw.flush();
		pw.close();
	}
}

===========================================================================================================================

05_provincecity.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>省份-城市，基于jQuery的AJAX二级联动</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <body>
	
	<select id="province">
		<option>选择省份</option>
		<option>湖南</option>
		<option>广东</option>
	</select>
	
	<select id="city">
		<option>选择城市</option>
	</select>

	
	<!-- 省份->城市 -->	
	<script type="text/javascript">
		//定位省份下拉框，同时添时内容改变事件
		$("#province").change( function(){
			//清空原城市下拉框中的内容，除第一项外
			$("#city option:gt(0)").remove();
			//获取选中的省份
			var province = $("#province option:selected").text();
			//如果选中的不是"选择省份"
			if("选择省份"!=province){
				$.ajax( {
					type    : "POST",
					url     : "${pageContext.request.contextPath}/struts2/findCityByProvinceRequest?time="+new Date().getTime(),
					data    : {"province":province},
					success : function(backDate,textStatus,ajax){
								//alert(backDate!=null?"收到":"为收到");	
								//alert(ajax.responseText);
								//解析json文本
								var array = backDate.setCity;
							  	var size = array.length;
							  	for(var i=0;i<size;i++){
							  		var city = array[i];
							  		var $option = $("<option>"+city+"</option>");
							  		$("#city").append($option);
							  	}
							  }
				} );
			}
		} );
	</script>

  </body>
</html>

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">

  <filter>
  	<filter-name>StrutsPrepareAndExecuteFilter</filter-name>
  	<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
  </filter>
  <filter-mapping>
  	<filter-name>StrutsPrepareAndExecuteFilter</filter-name>
	<url-pattern>/struts2/*</url-pattern>
  </filter-mapping>
 </web-app>

ProvinceCityAction.java

package cn.itcast.javaee.js.provincecity;

import java.util.LinkedHashSet;
import java.util.Set;
import com.opensymphony.xwork2.ActionSupport;

/**
 * 控制器 
 * @author AdminTC
 */
public class ProvinceCityAction extends ActionSupport{
	private String province;
	public void setProvince(String province) {
		this.province = province;
		//System.out.println("注入" + province);
	}	
	private Set<String> setCity;
	public Set<String> getSetCity() {
		return setCity;
	}
	
	//根据省份查询城市
	public String findCityByProvince() throws Exception {
		setCity = new LinkedHashSet<String>();
		if("湖南".equals(province)){
			setCity.add("长沙");
			setCity.add("株洲");
		}else if("广东".equals(province)){
			setCity.add("广州");
			setCity.add("中山");
			setCity.add("佛山");
		}
		return SUCCESS;
	}
}

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

   <package name="myPackage" extends="json-default" namespace="/">
   
   		<!-- 根据省份查询城市 -->
   		<action 
   			name="findCityByProvinceRequest" 
   			class="cn.itcast.javaee.js.provincecity.ProvinceCityAction" 
   			method="findCityByProvince">
		
			<result name="success" type="json"/>
			
   		</action>
   	
   </package>

</struts>

响应：

===========================================================================================================================

jQuery解析XML

xml文件：03_city.xml

<?xml version="1.0" encoding="UTF-8"?>
<root>
	<city>广州</city>
	<city>深圳</city>
	<city>香港</city>
	<city>澳门</city>
	<city>台湾</city>
	<city>中山</city>
</root>

04_parsexml.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery解析XML</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <body>
	
	<input type="button" value="解析服务器响应的xml文件"/>

	<script type="text/javascript">
		$(":button").click(function(){
			var url = "${pageContext.request.contextPath}/03_city.xml?time="+new Date().getTime();
			var sendData = null;
			$.get(url,sendData,function(xml){
				//用jquery中的api解析xml文件，这时的xml是js对象
				var $xml = $(xml).find("city");
				//迭代
				$xml.each(function(){
					var city = $(this).text();
					alert(city);
				});
			});
		});
	</script>
	
  </body>
</html>