这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要为大家详细介绍了 JQuery ajax 请求 struts action 实现异步刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这个样例是用 JQuery ajax 和 struts 来做的一个小样例,在这个样例中采用两种方式将 java Util 中的 list 转换成支 json 的格式,第一种是用 json-lib.jar 这个 jar 包来转换,第二种是采用 goole 的 gson-2.1.jar 来转换,大家可以根据需要导入相应的 jar 包,在这里为了做测试将两种 jar 包都导入了。下面开始进入正题
第一步:导入相关 jar 包,本样例需导入 struts 相关 jar 包,json-lib.jar,gson-2.1.jar 可以任意选择,但是这里需要都导入,因为为了做测试,两种 jar 包的转换方式都用到了。
第二步:配置 web.xml
- <?xml version="1.0" encoding="UTF-8" ?>
- <web-app version="3.0" 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_3_0.xsd">
- <display-name>
- </display-name>
- <!-- 声明Struts2的前端控制器 -->
- <filter>
- <filter-name>
- struts2
- </filter-name>
- <filter-class>
- org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
- </filter-class>
- </filter>
- <filter-mapping>
- <filter-name>
- struts2
- </filter-name>
- <url-pattern>
- /*
- </url-pattern>
- </filter-mapping>
- <!-- 声明Spring的ContextListener,负责上下文一加载立即创建BeanFactory -->
- <context-param>
- <!-- 若applicationContext.xml没有放在WEB-INF下或者不叫这个名字,必需声明此参数 -->
- <param-name>
- contextConfigLocation
- </param-name>
- <param-value>
- classpath:applicationContext.xml
- </param-value>
- </context-param>
- </web-app>
第三步:新建 struts.xml, 默认 admin / 下跳转到 / WEB-INF/index.jsp
- <?xml version="1.0" encoding="UTF-8" ?>
- <!-- <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> -->
- <!DOCTYPE struts PUBLIC
- "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
- "http://www.yxccc.com/news/">
- <struts>
- <package name="bg" namespace="/" extends="struts-default">
- <default-action-ref name="index"/>
- <!-- =================基础跳转====================== -->
- <action name="index">
- <result>/WEB-INF/index.jsp</result>
- </action>
- </package>
- </struts>
第四步:编写 AjaxRequestAction.java 文件,这里做了两种请求,一种是直接请求到字符串,另一种是请求到一组数组格式的数据,但该数据必须要转换成 JSON 支持的数组,具体如下
- package com.fengqi.action;
- import java.io.IOException;
- import java.util.ArrayList;
- import java.util.List;
- import javax.servlet.http.HttpServletResponse;
- import net.sf.json.JSONArray;
- import org.apache.struts2.ServletActionContext;
- import com.google.gson.Gson;
- import com.opensymphony.xwork2.ActionSupport;
- /**
- * 创建时间:2014-10-24,ajax请求的action样例
- */
- public class AjaxRequestAction extends ActionSupport{
- private String sex;
- @Override
- public String execute() throws Exception {
- return super.execute();
- }
- /**
- * ajax请求,以json格式的字符串响应请求
- */
- public void ajaxString(){
- System.out.println(sex);
- //获取相应Response
- HttpServletResponse response = ServletActionContext.getResponse();
- //设置编码方式
- response.setCharacterEncoding("UTF-8");
- try {
- if(sex.equals("nan")){
- response.getWriter().write("我是男的");
- }else if(sex.equals("nv")){
- response.getWriter().write("我是女的");
- }else{
- response.getWriter().write("男女都不是");
- }
- //将数据写到页面中
- } catch (IOException e) {
- e.printStackTrace();
- }
- }
- /**
- * ajax请求,以list的形式响应请求,主要这里的list并不是Util的List,而是经过转换成指出json格式的List
- */
- public void ajaxList(){
- List<Object> list = new ArrayList<Object>();
- list.add("张三");
- list.add("李四");
- //第一种方法:利用json-lib包中的JSONArray将List转换成JSONArray各式。
- JSONArray jsonArray = JSONArray.fromObject(list);
- //第二周方法:利用goole的json包将List转换成Json对象。
- Gson gson = new Gson();
- String gsonList = gson.toJson(list);
- //获取相应Response
- HttpServletResponse response = ServletActionContext.getResponse();
- //设置编码方式
- response.setCharacterEncoding("UTF-8");
- try {
- //将数据写到页面中
- response.getWriter().println(jsonArray);
- } catch (IOException e) {
- e.printStackTrace();
- }
- }
- public String getSex() {
- return sex;
- }
- public void setSex(String sex) {
- this.sex = sex;
- }
- }
第五步:在将 struts.xml 文件更新下,配置 AjaxRequestAction.java 的访问路径添加如下代码
- <package name="ajax" namespace="/ajax" extends="struts-default">
- <!-- =================ajax请求跳转====================== -->
- <action name="ajax_*" class="com.fengqi.action.AjaxRequestAction" method="ajax{1}">
- </action>
- </package>
最后 struts.xml 的完整文件是
- <?xml version="1.0" encoding="UTF-8" ?>
- <!DOCTYPE struts PUBLIC
- "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
- "http://www.yxccc.com">
- <struts>
- <package name="bg" namespace="/admin" extends="struts-default">
- <default-action-ref name="index"/>
- <!-- =================基础跳转====================== -->
- <action name="index">
- <result>/WEB-INF/index.jsp</result>
- </action>
- </package>
- <package name="ajax" namespace="/ajax" extends="struts-default">
- <!-- =================ajax请求跳转====================== -->
- <action name="ajax_*" class="com.fengqi.action.AjaxRequestAction" method="ajax{1}">
- </action>
- </package>
- </struts>
第六步:编写 index.jsp 文件,这里做了两种请求,一种是直接请求到字符串,另一种是请求到一组数组格式的数据,但该数据必须要转换成 JSON 支持的数组,具体如下
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
- <% String path=r equest.getContextPath(); String basePath=r equest.getScheme()+
- "://"+request.getServerName()+ ":"+request.getServerPort()+path+ "/"; %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <base href="<%=basePath%>" rel="external nofollow">
- <title>
- ajax异步刷新样例测试
- </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 href="http://www.yxccc.com/CSS/css.css" rel="stylesheet" type="text/css"
- />
- <script src="js/jquery-2.1.1.min.js">
- </script>
- <script type="text/javascript">
- $(document).ready(function() {
- $("#hh1").click(function() {
- $.ajax({
- url: "ajax/ajax_String",
- //请求url
- data: {
- sex: $("#txt1").val()
- },
- success: function(data) { //请求返回的数据
- $("div").html(data); //将数据打印到页面的div中
- }
- });
- });
- $("#hh2").click(function() {
- $.ajax({
- url: "ajax/ajax_List",
- //请求url http://www.yxccc.com
- //cache: false,
- type: "POST",
- //请求头,这里是post
- datatype: 'json',
- //请求数据各式,这里是json格式
- success: function(data, status) {
- data = $.parseJSON(data); //将字符串格式的数据转换成json对象
- //这里将option元素移除是考虑到如果在页面不刷新的情况下多次请求,会产生数据累加,不符合业务需求,因此需先删除在增加元素。
- $("option").remove();
- $("select").append("<option>请选择</option>"); //在select元素下添加option子元素。
- $(data).each(function(i) { //遍历请求相应的data数据
- $("select").append("<option>" + data[i] + "</option>");
- })
- }
- });
- });
- });
- </script>
- </head>
- <body>
- <br>
- <h2 align="center">
- 这里是ajax请求Demo,该实例是请求Struts中的action
- </h2>
- <br>
- <button id="hh1">
- 请求返回常规字符串
- </button>
- <button id="hh2">
- 请求返回JSON格式的List
- </button>
- <br>
- <br>
- <div>
- 这里是div元素
- </div>
- <br>
- 请选择性别:
- <select id="txt1" name="sex">
- <option>
- 请选择
- </option>
- <option value="nan">
- 男
- </option>
- <option value="nv">
- 女
- </option>
- </select>
- <br>
- <br>
- <select>
- <option>
- select选择
- </option>
- </select>
- </body>
- </html>
这样一个简单的 ajax 请求就已经完成了。
来源: http://www.phperz.com/article/17/0429/333962.html