struts2、ajax实现前后端交互
跳过struts2环境搭建部分,或者可以看我的博客(http://www.cnblogs.com/zhangky/p/8436472.html),里面有写,很详细。
需要导入的jar包(struts官网有,自己下)
一、java类
private String username;
private String pwd;
private Map<String, Object> result; public String getUsername() {
return username;
} public void setUsername(String username) {
this.username = username;
} public String getPwd() {
return pwd;
} public void setPwd(String pwd) {
this.pwd = pwd;
} public Map<String, Object> getResult() {
return result;
} public void setResult(Map<String, Object> result) {
this.result = result;
} public String login() {
result = new HashMap<String , Object>();
if(username.equals("z") && pwd.equals("123")) {
result.put("success", true);
result.put("username", username);
return "success";
}else {
result.put("success", false);
return "success";
} }
二、html页面
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<div id="tips"></div>
<input type="text" id="username"/>
<input type="password" id="pwd"/>
<button onclick="login()">登录</button>
</body>
<script src="jquery.min.js"></script>
<script>
function login(){
const username = document.getElementById("username").value;
const pwd = document.getElementById("pwd").value;
$.ajax({
type:"POST",
url:"login",
data:{
"username":username,
"pwd":pwd
},
dataType:"json",
success:function(data){
let tips = document.getElementById("tips");
if(data.success == true){
window.location.href = "welcome.html?username=" + data.username
}else{
tips.innerHTML = "用户名或者密码错误";
}
},
error:function(error){ }
})
}
</script>
</html>
三、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>
<package name="default" namespace="/" extends="json-default,struts-default">
<action name="login" class="day20.LoginAction" method="login" >
<!--result默认name是success可不写,由于返回的是json格式数据,因此type必须是json -->
<result type="json">
<!--param 的 name固定写,result就是java类要返回的数据变量 -->
<param name="root">result</param>
</result>
</action>
</package>
</struts>
struts2、ajax实现前后端交互的更多相关文章
- 把数据转化为JSON格式用ajax进行前后端交互
接着在https://www.cnblogs.com/dong973711/p/10907733.html的基础上做验证. 从前端提交数据 前端页面,submit.html <!DOCTYPE ...
- SSM-网站后台管理系统制作(4)---Ajax前后端交互
前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...
- thinkphp+jquery+ajax前后端交互注册验证
thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- ajax学习----json,前后端交互,ajax
json <script> var obj = {"name": "xiaopo","age": 18,"gender ...
- Vue-CLI项目-axios模块前后端交互(类似ajax提交)
08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axio ...
- content-type常见类型辨析(以ajax与springmvc前后端交互为例)
博客搬家: content-type常见类型辨析(以ajax与springmvc前后端交互为例) 在http报文的首部中,有一个字段Content-type,表示请求体(entity body)中的数 ...
- Node之简单的前后端交互
node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...
- Django之META与前后端交互
Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...
- 前后端交互实现(nginx,json,以及datatable的问题相关)
1.同源问题解决 首先,在同一个域下搭建网络域名访问,需要nginx软件,下载之后修改部分配置 然后再终端下cmd nginx.exe命令,或者打开nginx.exe文件,会运行nginx一闪而过, ...
随机推荐
- [LeetCode]640解方程式
问题描述: 示例 1: 输入: "x+5-3+x=6+x-2" 输出: "x=2" 示例 2: 输入: "x=x" 输出: "In ...
- POJ 2656
#include<iostream> #include<stdio.h> using namespace std; int main() { //freopen("a ...
- KahaDB简介
ActiveMQ 5.3以后,出现了KahaDB.她是一个基于文件支持事务的消息存储器,是一个可靠,高性能,可扩展的消息存储器. 她的设计初衷就是使用简单并尽可能的快.KahaDB的索引使用一 ...
- java+hibernate+mysql
实体类News package org.mythsky.hibernatedemo; import javax.persistence.*; @Entity @Table(name="new ...
- 全网最详细的U盘被损坏导致一般性的软件无法修复的解决办法(必须可以)(图文详解)
不多说,直接上干货! 问题详情 一般,在不正当地操作U盘时,容易出现如下的情况: 解决办法: 本人,在尝试多款U盘修复工具软件后,发现: 成功几率很大,博文本人亲自尝试,并强烈推荐. 欢迎大家,加入我 ...
- Sublime Text shift+ctrl 妙用
1 :按住shift+ctrl然后按←或→可快速选中一行中的某一部分,相当于双击鼠标选中. 当你想在代码末尾加注释的话,这个方法很好用 输入文字 -> 光标移到文字末尾 -> 按住shif ...
- Linux系统修改防火墙配置
防火墙配置文件位置 /etc/sysconfig/iptables 需要开放端口,请在里面添加一条内容即可: 1 -A RH-Firewall-1-INPUT -m state --state NEW ...
- mysql 根据一张表更新另一张表
between 是>= and <=,即包含两个边界
- nginx把两个不同的网站挂到同一台服务器的80端口上
本文主要分享如果利用nginx把两个不同的网站挂到同一台服务器的80端口上 最终效果 例如:www.manyjar.com (web服务器是8080端口)和ishenghuo.manyjar.com ...
- Tomcat学习总结(14)—— Tomcat常见面试题
一.Tomcat的缺省是多少,怎么修改 Tomcat的缺省端口号是8080. 修改Tomcat端口号: 1.找到Tomcat目录下的conf文件夹 2.进入conf文件夹里面找到server.xml文 ...