jQuery ajax는 비동기 새로 고침 예제 공유를 구현하기 위해 struts 작업을 요청합니다.-JS 튜토리얼-php.cn

jQuery ajax는 비동기 새로 고침 예제 공유를 구현하기 위해 struts 작업을 요청합니다.

小云云

풀어 주다： 2018-01-17 14:56:20

원래의

1227명이 탐색했습니다.

이 기사에서는 비동기 새로 고침을 달성하기 위해 Struts 작업을 요청하는 JQuery ajax를 주로 소개합니다. 관심 있는 친구가 이를 참조하면 도움이 될 수 있습니다.

이 예제는 JQuery ajax와 struts를 사용한 작은 예제입니다. 이 예제에서는 java Util의 목록을 json 형식으로 변환하는 데 사용됩니다. 첫 번째는 jar를 변환하는 데 사용됩니다. 두 번째 방법은 Goole의 gson-2.1.jar을 사용하여 필요에 따라 해당 jar 패키지를 가져올 수 있습니다. 여기에서는 테스트를 위해 두 jar 패키지를 모두 가져옵니다. 이제 본론으로 들어가겠습니다

1단계:관련 jar 패키지 가져오기 이 예에서는 json-lib.jar 및 gson-2.1.jar을 마음대로 선택할 수 있습니다. 테스트를 위해 두 jar 패키지 변환 방법이 모두 사용되었기 때문에 여기에서 모두 가져와야 합니다.

2단계: 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.php.cn/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>

로그인 후 복사

3단계: 새 struts.xml 생성, 기본 관리자//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>

로그인 후 복사

로 이동 4단계 : 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;
 }
 
}

로그인 후 복사

5단계: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>

로그인 후 복사

6단계: index.jsp 파일을 작성합니다. 여기서는 두 가지 요청이 이루어집니다. 하나는 문자열을 직접 요청하는 것이고, 다른 하나는 배열 형식의 데이터 집합을 요청하는 것입니다. 아래에 자세히 설명된 대로 JSON이 지원하는 배열

<%@ 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%>" 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){//请求返回的数据
   $("p").html(data);//将数据打印到页面的p中
  }
  });
 });
 $("#hh2").click(function() {
  $.ajax({
       url: "ajax/ajax_List",//请求url http://www.yxccc.com
       //cache: false,
       type: "POST", //请求头，这里是post
       datatype: &#39;json&#39;, //请求数据各式，这里是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>
  <p>这里是p元素</p><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 요청이 완료되었습니다.