Appcan与后台数据交互，登录例子
1.appcan界面（login.html）
假定后台路径为：http://localhost:8080/LabManageSystem/appcan/login/loginHandle.jsp，其中LabManageSystem为项目名称，appcan/login为项目下的文件夹，
loginHandle.jsp就是最里面login文件夹下的处理appcan用户名和密码的JSP文件。
appcan界面（login.html）
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
<link rel="stylesheet" href="login_content/css/main.css">
</head>
<body class="um-vp bc-bg" ontouchstart>
<div class="ub ub-ver ub-f1">
<form method="get" action="http://localhost:8080/LabManageSystem/appcan/login/loginHandle.jsp">
<div class="uba b-gra umar-a uc-a1 c-wh">
<div class="ub ub-ac">
<div class="umhw resuser ub-img umar-l"></div>
<div class="ub-f1 uinput uinn">
<input placeholder="手机/用户名" id="uid" name="username" type="text" class="uc-a1">
</div>
</div>
</div>
<div class="uba b-gra umar-a uc-a1 c-wh">
<div class="ub ub-ac">
<div class="umhw respwd ub-img umar-l"></div>
<div class="ub-f1 uinput uinn">
<input placeholder="密码" id="upwd" name="password" type="password" class="uc-a1">
</div>
</div>
</div>
<div class="uin uinn">
<div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a1" id="submit">
登 录
</div>
</div>
</div>
<button type="submit"class="uinvisible"></button>
</form>
</div>
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
</body>
<script>
appcan.ready(function() {
});
function login() {
var name = $("#uid").val();
var pwd = $("#upwd").val();
if (name == "") {
appcan.window.openToast('账号不能为空', '2000');
return;
} else if (pwd == "") {
appcan.window.openToast('密码不能为空', '2000');
return;
} else {
$("form").submit();
}
}
appcan.button("#submit", "ani-act", function() {
login();
})
$("form").on('submit', function() {
var name = $("#uid").val();
var pwd = $("#upwd").val();
appcan.ajax({
url : 'http://localhost:8080/LabManageSystem/appcan/login/loginHandle.jsp',
type : 'GET',
data : {
username : name,
password : pwd
},
success : function(data) {
if (data == "1") {//登陆成功
appcan.window.openToast('登陆成功', '2000');
var timer = setTimeout(function() {
appcan.openWinWithUrl('index', 'index.html');
//页面跳转
}, 2000);
}else {
appcan.window.openToast('账号或密码错误！', '2000');
}
}
});
return false;
});
</script>
</html>
后台处理：loginHandle.jsp
<%@page import="java.io.PrintWriter"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@page import="service.*"%>
<%@page import="service.impl.*"%>
<%@page import="service.exception.*"%>
<%@page import="entity.*"%>
<%@page import="factory.*"%>
<%@page import="rowmapper.*"%>
<%@page import="java.util.*"%>
<%@page import="util.*"%>
<%@page import="java.text.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录处理</title>
</head>
<%!private UserService userService = ServiceFactory.getUserService();%>
<%
//设置编码
request.setCharacterEncoding("utf-8");
PrintWriter pw = response.getWriter();
String username = request.getParameter("username");
String password = request.getParameter("password");
User u = userService.login(username, password);
if (null != u) {
pw.write("1");//登录成功,标记为1
}else{
pw.write("账号或密码错误！");
}
pw.flush();
pw.close();
%>
</html>
Appcan与后台数据交互，登录例子相关推荐
- ajax与后台php,怎么在thinkPHP5中使用ajax实现与后台数据交互
怎么在thinkPHP5中使用ajax实现与后台数据交互 发布时间:2021-03-20 17:20:01 来源:亿速云 阅读:87 作者:Leah 这篇文章给大家介绍怎么在thinkPHP5中使用a ...
- servlet向ajax传递数据库,一、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)...
背景: 目前业界很流行的MVC(model-view-control)开发模式,理解为 模型是Bean, 视图是 Html/Jsp, 控制是Servlet, 关联数据库的Dao web的运行机制: 数 ...
- --@angularJS--自定义服务与后台数据交互小实例
1.myService.html: <!DOCTYPE HTML> <html ng-app="app"> <head> <tit ...
- 实现小程序与SSM后台数据交互
实现小程序与SSM后台数据交互 项目源码 文章目录 实现小程序与SSM后台数据交互 项目源码 1.controller 2.小程序js 实现效果 1.controller @RequestMappin ...
- 微信小程序数据库交互 php,微信小程序wx.request实现后台数据交互功能分析
本文主要介绍微信小程序wx.request实现后台数据交互功能,分析微信小程序wx.request在后台数据交互过程中遇到的问题与相关的解决方法,需要的朋友可以参考下 记录微信小程序wx.reques ...
- js前台与后台数据交互-前台调后台
网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数据,然后将数据传给前台来显示出来(当然可以将后台代码嵌入到前台).即: 下面就讲前台与后台进行数据交互的方法,分前台调用后台方 ...
- web前端与后台数据交互
1.前端请求数据URL由谁来写? 在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数,这里的查 ...
- vue-cli模拟后台数据交互
作为一个前端入坑的妹子,在学习vue的道路上挣扎徘徊,由一开始的对vue一直蒙圈只知道双向数据绑定和一些'V-x'的指令,慢慢通过一个视频的学习渐渐入坑,对于我这个js基础不怎么好而且编程思维又不是很 ...
- 前端和后台数据交互总结
web服务器应用程序:apache,tomcat,nodeJs.Nginx.IIS. 后台语言:php,java,.net,nodeJS 数据库:Mysql,SqlServer,Oracle 后台mv ...
最新文章
- 一群热爱python运维的精英们！
- 树与二叉树的深度优先与广度优先算法（递归与非递归）
- codecomb 2091【路径数量】
- boost多线程使用简例
- 十大笔记本电脑排行_十大笔记本电脑品牌排行榜 世界上最受欢迎的电脑品牌...
- JS之数据类型v（** v**）v个人笔记
- 【poj2096】Collecting Bugs 期望dp
- 掌握6大技巧，让python编程健步如飞！
- SDRAM控制器设计（9）用读写FIFO优化及仿真验证
- 高淇java_关于高淇JAVA中SORM总结学习笔记详细个人解释
- 矩阵的转置、加和乘法写入C++
- 车机屏幕适配方案总结
- 爬虫小案例——爬取豆瓣电影《寄生虫》的短评
- android sit0 ip6tnl0,USB wifi调试笔记
- CSS入门二、美化页面元素
- [UE4]传送门：场景切换
- 云宏广东省中医院虚拟化管理平台
- 常用Linux命令大全（100%收藏食用❤️）
- 江苏理工学院计算机系李沛杰,来！为你喜爱的新教师投上一票！
- pragma warning