跳过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实现前后端交互的更多相关文章

  1. 把数据转化为JSON格式用ajax进行前后端交互

    接着在https://www.cnblogs.com/dong973711/p/10907733.html的基础上做验证. 从前端提交数据 前端页面,submit.html <!DOCTYPE ...

  2. SSM-网站后台管理系统制作（4）---Ajax前后端交互

    前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...

  3. thinkphp+jquery+ajax前后端交互注册验证

    thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  4. ajax学习----json，前后端交互，ajax

    json <script> var obj = {"name": "xiaopo","age": 18,"gender ...

  5. Vue-CLI项目-axios模块前后端交互(类似ajax提交)

    08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axio ...

  6. content-type常见类型辨析(以ajax与springmvc前后端交互为例)

    博客搬家: content-type常见类型辨析(以ajax与springmvc前后端交互为例) 在http报文的首部中,有一个字段Content-type,表示请求体(entity body)中的数 ...

  7. Node之简单的前后端交互

    node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...

  8. Django之META与前后端交互

    Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...

  9. 前后端交互实现（nginx,json,以及datatable的问题相关）

    1.同源问题解决 首先,在同一个域下搭建网络域名访问,需要nginx软件,下载之后修改部分配置 然后再终端下cmd  nginx.exe命令,或者打开nginx.exe文件,会运行nginx一闪而过, ...

随机推荐

  1. 【sping揭秘】12、SpringAOP的实现机制

    SpringAOP的实现机制 设计模式代理模式 参考我之前的代理模式 http://www.cnblogs.com/cutter-point/p/5226642.html 这里写个简单的案例 pack ...

  2. 利用VS2017跨平台远程调试aspnetcore应用

    vs2017开始支持跨平台远程调试coreclr的应用,通常用于调试linux与mac上运行的aspnetcore程序,而如果运行在docker中的应用 要使用跨平台远程调试功能,首先运行corecl ...

  3. ES使用org.elasticsearch.client.transport.NoNodeAvailableException: No node available 错误解决方法

    1) 端口错 client = new TransportClient().addTransportAddress(new InetSocketTransportAddress(ipAddress, ...

  4. 自然语言处理--LDA主题聚类模型

    LDA模型算法简介: 算法 的输入是一个文档的集合D={d1, d2, d3, ... , dn},同时还需要聚类的类别数量m:然后会算法会将每一篇文档 di 在 所有Topic上的一个概率值p:这样 ...

  5. Spring Boot项目的内嵌容器

    一.关于容器 刚才开始使用spring boot的开发者会有种很直观的感觉,servlet容器“不见了”.之前开发web项目,都是把程序写完后部署到servlet容器(比如Tomcat),但是使用sp ...

  6. POJ 2262 Goldbach's Conjecture （打表）

    题目链接: https://cn.vjudge.net/problem/POJ-2262 题目描述: In 1742, Christian Goldbach, a German amateur mat ...

  7. 求XF+闭包(第十一届河南省省赛真题)

    题目描述 如何设计一个好的数据库不仅仅是一个理论研究问题,也是一个实际应用问题.在关系数据库中不满足规范化理论的数据库设计会存在冗余.插入异常.删除异常等现象. 设R(U)是一个关系模式,U={ A1 ...

  8. 136 Ugly Numbers(priority_queue+逆向求解要求数)

    题目链接: https://cn.vjudge.net/problem/UVA-136 /*问题 输出第1500个丑数,丑数的定义是不能被2,3,5以外的其他素数整除的数 解题思路 直接硬暴力先试一下 ...

  9. 拥抱HTML5

    HTNL5是2014年10月W3C推出的新标准,引入新的特性并对移动端更加友好. canvas <canvas>标签用于标记画布元素, 使用js脚本可以在画布上绘制自定义图形. 绘制矩形; ...

  10. 并发编程之 CyclicBarrier 源码分析

    前言 在之前的介绍 CountDownLatch 的文章中,CountDown 可以实现多个线程协调,在所有指定线程完成后,主线程才执行任务. 但是,CountDownLatch 有个缺陷,这点 JD ...