Struts2 및 Ajax 데이터 상호 작용(그래픽 튜토리얼)-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Struts2 및 Ajax 데이터 상호 작용(그래픽 튜토리얼)

亚连

May 21, 2018 pm 04:24 PM

ajaxstruts2그래픽 및 텍스트

이 글은 Struts2와 Ajax 데이터 상호 작용에 대한 관련 정보를 주로 소개하며, 관심 있는 학생이라면 누구나 참고할 수 있는 학습 가치가 있습니다.

머리말

우리는 Web 2.0의 추세와 Ajax의 탁월함부터 시작합니다. Struts2 프레임워크 자체는 Ajax에 대한 기본 지원을 통합합니다(struts 2.1.7+, 이전 버전은 플러그인을 통해 구현 가능). 프레임워크의 통합은 JSON 생성을 매우 간단하게 만들고 Struts2 프레임워크에 쉽게 통합될 수 있습니다. 물론 이는 JSON이 필요할 때만 훌륭하게 나타날 것입니다.

ajax 요청은 프로젝트에서 자주 사용됩니다. 오늘은 Struts2에서 작업을 요청하기 위해 ajax를 사용할 때 프론트 페이지와 백그라운드 작업 간의 데이터 전송 상호 작용에 대해 일반적으로 알고 있는 내용을 요약하겠습니다.

여기에는 주로 제가 익힌 몇 가지 방법을 기록합니다. 일일 프로젝트 요구 사항에 따라 선택할 수 있습니다.

1. 스트림 유형 result를 사용하세요

이 유형은 Struts2의 작업이 클라이언트 브라우저에 대한 텍스트 응답을 생성하도록 직접 허용할 수 있습니다.

예:

jsp 페이지:

<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>ajax提交登录信息</title>
 <%--导入js插件--%>
 <script src="${PageContext.request.contextPath}/demo/js/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<h3 id="异步登录">异步登录</h3>
<s:form id="loginForm" method="POST">
 <s:textfield name="username"/>
 <s:textfield name="psw"/>
 <input id="loginBtn" type="button" value="提交">
</s:form>
<p id="show" style="display:none;"></p>
</body>
<script type="text/javascript">
 $("#loginBtn").click(function(){
 $("#show").hide();
 //发送请求login 以各表单里歌空间作为请求参数
 $.get("login",$("#loginForm").serializeArray(),
  function(data,statusText){

  $("#show").height(80)
   .width(240)
   .css("border","1px solid black")
   .css("border-radius","15px")
   .css("backgroud-color","#efef99")
   .css("color","#ff0000")
   .css("padding","20px")
   .empty();
  $("#show").append("登录结果:"+data+"<br/>");
  $("#show").show(600);

 },"html");//指定服务器响应为html
 });
</script>
</html>

논리 처리를 위한 작업:

/**
 * Description:eleven.action
 * Author: Eleven
 * Date: 2018/1/26 18:09
 */
public class LoginAction extends ActionSupport{
 private String username;
 private String psw;
 //输出结果的二进制流
 private InputStream inputStream;

 public String login() throws Exception{
 if(username.equals("tom")&& psw.equals("123")){
  inputStream = new ByteArrayInputStream("恭喜您，登录成功".getBytes("UTF-8"));
 }else{
  inputStream = new ByteArrayInputStream("对不起，登录失败".getBytes("UTF-8"));
 }
 return SUCCESS;
 }

 //提供get方法
 public InputStream getInputStream() {

 return inputStream;
 }

 public String getUsername() {
 return username;
 }

 public void setUsername(String username) {
 this.username = username;
 }

 public String getPsw() {
 return psw;
 }

 public void setPsw(String psw) {
 this.psw = psw;
 }
}

페이지에서 전달된 사용자 이름과 비밀번호를 받는 것 외에도 작업에는 InputStream 유형의 멤버 변수가 있으며 다음을 제공합니다. 해당 get 메소드. get 메소드에서 반환된 바이너리 스트림은 클라이언트 브라우저에 직접 출력됩니다.

struts.xml 구성:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
 "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
 "http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
 <constant name="struts.enable.DynamicMethodInvocation" value="false" />
 <constant name="struts.devMode" value="true" />
 <package name="default" namespace="/" extends="struts-default">
 <action name="login" class="eleven.action.LoginAction" method="login">
  <result type="stream">
  <!--指定stream流生成响应的数据类型-->
  <param name="contentType">text/html</param>
  <!--指定action中由哪个方法去输出InputStream类型的变量-->
  <param name="inputName">inputStream</param>
  </result>
 </action>
 </package>
</struts>

브라우저에서 페이지를 탐색하고 관련 정보를 입력한 후 제출하면 백그라운드 작업이 메시지 데이터를 페이지에 직접 반환하는 것을 볼 수 있으며 페이지는 그럴 필요가 없습니다. 동시에 새로 고쳐지며 ajax를 사용하여 요청을 비동기식으로 보내는 로컬로 직접 표시됩니다. 이 방법을 사용하려면 struts.xml 파일에서 stream 유형의 스트림을 구성하고, inputName 속성을 설정하고, 작업에서 InputStream에 해당하는 get 메서드를 제공해야 합니다.

실행 스크린샷:

2. json 유형 결과 사용

Struts2용 JSON 플러그인을 추가할 수 있는 jar 패키지 struts2-json-plugin-2.3.16.3.jar이 있습니다. 즉, 액션의 결과 유형이 json으로 설정된 경우 클라이언트 js에서도 액션을 비동기식으로 호출할 수 있고, 액션에서 반환된 데이터를 JSON 플러그인을 통해 직접 json 형식 문자열로 직렬화할 수 있으며, 문자열은 장치 검색을 위해 클라이언트에 반환됩니다.

예:

jsp 페이지:

<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>ajax提交登录信息</title>
 <%--导入js插件--%>
 <script src="${PageContext.request.contextPath}/demo/js/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<h3 id="异步登录">异步登录</h3>
<s:form id="loginForm" method="POST">
 <s:textfield name="username"/>
 <s:textfield name="psw"/>
 <input id="loginBtn" type="button" value="提交">
</s:form>
<p id="show" style="display:none;"></p>
</body>
<script type="text/javascript">
 $("#loginBtn").click(function(){
 $("#show").hide();
 //发送请求login 以各表单里歌空间作为请求参数
 $.get("login",$("#loginForm").serializeArray(),
  function(data,statusText){
  //此时的data中包含username,psw,age
  $("#show").height(80)
   .width(300)
   .css("border","1px solid black")
   .css("border-radius","15px")
   .css("backgroud-color","#efef99")
   .css("color","#ff0000")
   .css("padding","20px")
   .empty();  
  alert(data);
  $("#show").append(data+"<br/>");
  $("#show").show(600);
 },"html");
 });
</script>
</html>

액션 코드:

public class LoginAction extends ActionSupport{
 private String username;
 private String psw;
 private int age;
 public String login() throws Exception{
  age = 18;
  return SUCCESS;
 }

 public String getUsername() {
  return username;
 }

 public void setUsername(String username) {
  this.username = username;
 }

 public String getPsw() {
  return psw;
 }

 public void setPsw(String psw) {
  this.psw = psw;
 }

 public int getAge() {
  return age;
 }

 public void setAge(int age) {
  this.age = age;
 }
}

Struts.xml 구성:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
 "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
 "http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
 <constant name="struts.enable.DynamicMethodInvocation" value="false" />
 <constant name="struts.devMode" value="true" />
 <package name="default" namespace="/" extends="struts-default,json-default">
  <action name="login" class="eleven.action.LoginAction" method="login">
   <result type="json">
    <param name="noCache">true</param>
    <param name="contentType">text/html</param>
   </result>
  </action>
 </package>
</struts>

브라우저에서 페이지를 탐색하고 관련 정보를 입력한 후 제출하면 백그라운드 액션을 볼 수 있습니다. 메시지 데이터는 페이지에 직접 반환되며 동시에 페이지를 새로 고칠 필요가 없으며 로컬에서 직접 표시됩니다. 이는 ajax의 비동기 전송 요청을 사용합니다. 이 방법을 사용하려면 struts에서 json-default를 상속하도록 패키지를 구성해야 합니다. 물론, 전제는 struts2-json-plugin-2.3.16.3.jar이 추가된다는 것입니다. 그렇지 않으면 struts2는 데이터를 json 형식 데이터로 자동 변환하지 않습니다.

효과 스크린샷:

결과 유형이 json이 되는 단계를 요약할 수 있습니다:

　1. jar 패키지를 가져옵니다: struts2-json-plugin-2.3.7.jar　

　2. struts에서 반환된 결과를 구성합니다. 뷰 설정 유형을 json

　3. 해당 작업이 있는 패키지를 json-default

　4. 반환할 데이터에 대한 get 메서드를 제공합니다

　5. 설정 struts.xml에 반환된 데이터의 형식

첫 번째 5단계: 반환된 데이터의 형식을 설정합니다. 다음은 간단한 예일 뿐이며 복잡한 데이터는 없습니다. List 컬렉션이 반환되면 데이터 형식을 다음과 같이 설정할 수 있습니다.

<result name="test" type="json">
  <!-- 设置数据的来源从某个数据得到 -->
  　<!-- 过滤数据从gtmList集合中得到，且只获取集合中对象的name，跟uuid属性 -->　　　　　　<param name="root">gtmList</param>
  <param name="includeProperties">
    \[\d+\]\.name,
    \[\d+\]\.uuid
  </param> 
</result>

위 방법 외에도 다음 방법도 있습니다

<result name="ajaxGetBySm" type="json">
   <!-- 一般使用这种方式 先用来源过滤action默认从整个action中获取所有的（前提是此action中没有getAction()方法）
    但是为了方便 一般不写root:action这个
    然后再用包含设置进行过滤设置
   -->    
   <param name="root">action</param>
   <param name="includeProperties">
     gtmList\[\d+\]\.name,
     gtmList\[\d+\]\.uuid
   </param>
 </result>

위 두 가지 방법은 가져올 데이터를 설정하는 것입니다. gtmList 컬렉션에서 개체의 속성을 이름 및 uuid로만 가져옵니다. 여기에는 간단한 예만 나와 있습니다. 직접 가서 깊이 공부할 수 있습니다.

첨부된 것은 json 유형으로 지정할 수 있는 공통 매개변수입니다. 결과:

또한 struts2에서 지원하는 위의 두 가지 유형의 Ajax 외에도 실제로 단순히 다음과 같은 경우 서버는 데이터를 위해 클라이언트 브라우저와 상호 작용할 수 있으므로 response.getWrite()를 사용할 수 있습니다.

PrintWriter printWriter =response.getWriter();
printWriter.print("success");

어떤 방법을 선택해야 할까요?

저에게는 단순히 추가, 삭제, 수정 기능의 성공 여부를 판단하는 플래그라면 response.getWriter().print("xxx") 에 우선 순위를 부여하고 결과 유형을 스트리밍으로 설정할 수 있지만, 만약 대량의 객체 데이터를 페이지에서 수신한 후 표시해야 합니다. 예를 들어 페이지가 ajax를 통해 요청하고 목록 컬렉션을 반환하기 위한 백그라운드 작업이 필요한 경우 결과 유형을 json으로 구성하도록 선택해야 합니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사

如何从防护角度看Struts2历史漏洞May 13, 2023 pm 05:49 PM

一、前言Struts2漏洞是一个经典的漏洞系列，根源在于Struts2引入了OGNL表达式使得框架具有灵活的动态性。随着整体框架的补丁完善，现在想挖掘新的Struts2漏洞会比以前困难很多，从实际了解的情况来看，大部分用户早就修复了历史的高危漏洞。目前在做渗透测试时，Struts2漏洞主要也是碰碰运气，或者是打到内网之后用来攻击没打补丁的系统会比较有效。网上的分析文章主要从攻击利用的角度来分析这些Struts2漏洞。作为新华三攻防团队，我们的一部分工作是维护ips产品的规则库，今天回顾一下这个系

Nginx中404页面怎么配置及AJAX请求返回404页面May 26, 2023 pm 09:47 PM

404页面基础配置404错误是www网站访问容易出现的错误。最常见的出错提示：404notfound。404错误页的设置对网站seo有很大的影响，而设置不当，比如直接转跳主页等，会被搜索引擎降权拔毛。404页面的目的应该是告诉用户：你所请求的页面是不存在的，同时引导用户浏览网站其他页面而不是关掉窗口离去。搜索引擎通过http状态码来识别网页的状态。当搜索引擎获得了一个错误链接时，网站应该返回404状态码，告诉搜索引擎放弃对该链接的索引。而如果返回200或302状态码，搜索引擎就会为该链接建立索引

Struts2框架的原理是什么Jan 04, 2024 pm 01:55 PM

Struts2框架的原理：1、拦截器解析请求路径；2、查找Action的完整类名；3、创建Action对象；4、执行Action方法；5、返回结果；6、视图解析。它原理基于拦截器的机制，使得业务逻辑控制器与Servlet API完全脱离开，提高了代码的可重用性和可维护性。通过使用反射机制，Struts2框架可以灵活地创建和管理Action对象，实现请求与响应的处理。

Scrapy基于Ajax异步加载实现方法Jun 22, 2023 pm 11:09 PM

Scrapy是一个开源的Python爬虫框架，它可以快速高效地从网站上获取数据。然而，很多网站采用了Ajax异步加载技术，使得Scrapy无法直接获取数据。本文将介绍基于Ajax异步加载的Scrapy实现方法。一、Ajax异步加载原理Ajax异步加载：在传统的页面加载方式中，浏览器发送请求到服务器后，必须等待服务器返回响应并将页面全部加载完毕才能进行下一步操

如何使用CakePHP中的AJAX？Jun 04, 2023 pm 08:01 PM

作为一种基于MVC模式的PHP框架，CakePHP已成为许多Web开发人员的首选。它的结构简单，易于扩展，而其中的AJAX技术更是让开发变得更加高效。在本文中，将介绍如何使用CakePHP中的AJAX。什么是AJAX?在介绍如何在CakePHP中使用AJAX之前，我们先来了解一下什么是AJAX。AJAX是“异步JavaScript和XML”的缩写，是指一种在

什么是ajax重构Jul 01, 2022 pm 05:12 PM

ajax重构指的是在不改变软件现有功能的基础上，通过调整程序代码改善软件的质量、性能，使其程序的设计模式和架构更合理，提高软件的扩展性和维护性；Ajax的实现主要依赖于XMLHttpRequest对象，由于该对象的实例在处理事件完成后就会被销毁，所以在需要调用它的时候就要重新构建。

jquery ajax报错403怎么办Nov 30, 2022 am 10:09 AM

jquery ajax报错403是因为前端和服务器的域名不同而触发了防盗链机制，其解决办法：1、打开相应的代码文件；2、通过“public CorsFilter corsFilter() {...}”方法设置允许的域即可。

php如何使用AJax和json实现登录验证Jun 19, 2023 pm 01:28 PM

php用AJax和json实现登录验证的方法是：1、创建一个jsp示例文件，导入jquery依赖和fastjson依赖文件；2、新建login.js文件，获取用户名和密码文本内容；3、新建controller类，查询用户是否存在并把对象转化为json字符串类型返回给js文件；4、js判断是否成功然后进行页面跳转即可。

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

Dreamweaver Mac版

시각적 웹 개발 도구

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는