【javaWeb】前后端传递数据交互的两种方式

一、使用struct2的方法set及get

1、在jsp中直接定义定义form表单

<form id="formid"  name= "myform" method = 'post'  action = 'login.action' onsubmit = "return checkUser();" ><table width="100%" border="0"><tr><td width="60" height="40" align="right">用户名&nbsp;</td><td><input type="text" value="" class="text2" name = "username" id = "userid"/></td></tr><tr><td width="60" height="40" align="right">密&nbsp;&nbsp;码&nbsp;</td><td><input type="password" value="" class="text2" name = "password" id = "userpassid"/></td></tr><tr><td width="60" height="40" align="right">&nbsp;</td><td><div class="c4"><input type="submit" value="" class="btn2"  /></div></td></tr></table></form>

在js中对于数据进行核验

function checkUser(){var result = document.getElementById("userid").value;var password = document.getElementById("userpassid").value;if(result == ""  ){alert("用户名不能为空");return false;}if(password == ""  ){alert("密码不能为空");return false;}else{return true;}}

3、在对于数据提交的时候，会跳转到相应的action处

<action name="login" method="login" class="com.simpleton.demo.action.JsonAction">
</action>

4、对应提交的数据要在后台使用同一个命名，并设置set及get方法

    private String username;private String password;public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}

5、在xml中配置的跳转action

public void login(){System.out.println(username);System.out.println(password);
}

6、简单的验证

点击login登录以后后台输出如下

二、使用ajax传递数据

1、在js中直接使用ajax作为异步请求

$.ajax({           type:"post",url:"addwordJsonAction",//请求的actiondata:{word : word},//传递的数据dataType:"json",//设置需要返回的数据类型success:function(data){//成功时返回的数据}
});

2、在xml中的配置文件

<action name="*JsonAction" method="{1}" class="com.simpleton.demo.action.JsonAction"><!-- 返回json类型数据 --><result type="json"><param name="root">result</param></result>
</action>

3、对应的action文件中直接读取数据即可使用

HttpServletRequest request = ServletActionContext.getRequest();
String word = request.getParameter("word");
System.out.println(word);

【javaWeb】前后端传递数据交互的两种方式相关推荐

前后端交互的两种方式
方式一:表单提交表单(form):表单用于收集用户输入信息,并将数据提交给服务器.是一种常见的与服务端数据交互的一种方式 //1. action:指定表单的提交地址 //2. method:指定表单 ...
react 调用 html5,React-Native Webview 和H5交互的两种方式
React-Native WebView 和H5交互有两种方式: 方式1:RN Webview 向H5注入JS 此方式可作为Webview向H5端传递数据. RN Webview 有以下属性,可以注入 ...
（转）基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式...
http://www.cnblogs.com/wuhuacong/p/4085682.html 在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交, ...
docker容器运行mysql持久化_docker容器实现数据持久化的两种方式及其区别
前言这篇博文是我对docker实现数据持久化几种方式的特征进行一个总结. 在docker中,它的存储文件系统是在dockerhost上原有的xfs或ext4架设了一层文件系统:overlay2(将此 ...
Flash/Flex与外部对象或数据交互的几种方式
1.首先当然是发布的swf和浏览器容器直接的通信,有三种方式 1)使用flashvar直接传参数给swf,这是早期swf最主要的方式,也是美工们喜欢的 2)通过url 使用BrowserManag ...
iOS WKWebView和JS交互的两种方式
2019独角兽企业重金招聘Python工程师标准>>> 本文介绍两种方式实现iOS WKWebView和JS交互 WKWebViewConfiguration注入WKScriptMe ...
echarts前后端交互数据_如何避免前后端在数据交互方面的相爱相杀？
全前端包掉?还是全后端包掉?谁能裁决?所以,出现了以下对话: [问题点]所以,怎么办捏? Ebiubiu有话说: [划重点]需要根据实际业务不同场景下的情况做实际判断决策前端界面包含两类信息:数据内 ...
前端数据交互的五种方式
数据交互的主要五种方式:xhr .$.ajax .fetch.axios .vue-resource. 1.XMLHttpRequest是原生js基于浏览器所提供的一种可以数据交互的方式. 优点:1. ...
JPA踩坑笔记(一) - 数据查询的两种方式
本文介绍一下JPA常见的两种查询方式. 注:数据库为Oracle 1.前置准备 1.引入jar包使用JPA,首先引入jar包,一个是JPA,另一个是数据库驱动,我使用的是Oracle数据库. < ...

【javaWeb】前后端传递数据交互的两种方式

一、使用struct2的方法set及get

二、使用ajax传递数据

【javaWeb】前后端传递数据交互的两种方式相关推荐

最新文章

热门文章