struts-jquery-ajax

来源：互联网发布：js post 下载文件编辑：程序博客网时间：2024/05/18 23:53

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();//123var 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");//123String 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>

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

0 0