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>

转载于:https://www.cnblogs.com/zhangky/p/8513107.html

struts2、ajax实现前后端交互相关推荐

使用Ajax进行前后端交互（一）
实现我们需要做好准备工作本章涉及到的架包有: jackson-annotations-2.9.8.jar jackson-core-2.9.8.jar jackson-databind-2.9.8. ...
Flask使用ajax进行前后端交互
ajax前后端交互的使用已经非常普及了, 这种数据交互方式比表单提交数据带给用户的使用体验更好一些.同时,利用ajax交互时数据传输一般使用json,我们可以很方便的管理我们所需要的数据.只需要定义好 ...
JavaScript 学习笔记（八）前后端交互；Ajax进行前后端交互
目录一.前后端二.前后端接口三.Ajax 1. ajax接口步骤 2. 返回为json格式四.请求方式五.案例:登录一.前后端前端:用户可以看见的界面,我们一般浏览网页时看到的界面,展现 ...
ajax+node前后端交互学习笔记（1）
大致理解前后端交互的概念当你去餐馆吃饭的时候,坐下后服务员会带着⼀个菜单过来,问你需要点什么菜,这个时候你浏览了菜单上的菜,把想吃的菜告诉服务员,服务员把你点的菜拿到后台,后台根据你点的菜名,逐⼀ ...
【前端】前后端交互重点Ajaxの介绍及实战
❤️Ajax❤️ 每篇前言: 第一部分:JSON简介效果展示: 第二部分:前后交互 1.此处介绍前后交互的两种方式: (1)利用form表单里的name属性进行前后端交互 HTML代码: Pytho ...
ajax学习----json，前后端交互，ajax
json <script>var obj = {"name": "xiaopo","age": 18,"gender& ...
html 和jsp 引入jquery_不用jsp怎么实现前后端交互？给萌新后端的ajax教程(1)
众所周知jsp是已经入土的技术,虽然仍有不少老项目在用,但已经不值得花时间学习了,当然了解一下也是可以的.如果你是一位萌新后端,不想了解jsp,或者想做一个前后端分离的项目,想在纯html网页上实现前 ...
前后端交互之——AJAX提交
前言学前后端也有一段时间了,一直没有时间整理一下前后端交互方面的知识,想着再回顾一下顺带着整理出自己的学习笔记.可能有些地方写的不是很好,欢迎批评指正!!! 目录前言一.AJAX是什么二.AJ ...
[JavaScript][AJAX] 前后端交互流程,ajax工作流程
目录前后端交互流程 1.了解服务器 : 提供服务器的机器(计算机) 2.前端访问服务器的几种方式 3.ajax技术 : 页面不跳转的情况下,向服务器请求数据 4.前后端交互三个流程 ajax工作流 ...

struts2、ajax实现前后端交互

struts2、ajax实现前后端交互相关推荐

最新文章

热门文章