JSP AJAX之Form序列化登录体验
package web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import bean.User;
public class LoginServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
PrintWriter out=resp.getWriter();
String username=req.getParameter("username");
String userpwd=req.getParameter("userpwd");
String str="";
User user=new User(username,userpwd);
StringBuilder sb=new StringBuilder();
sb.append("{");
if(user!=null){
//JSONArray array=JSONArray.fromObject(user);
//str=array.toString();
sb.append("\"name\":\""+user.getUsername());
sb.append("\",");
sb.append("\"pwd\":\""+user.getPwd());
sb.append("\"");
}
sb.append("}");
System.out.println(sb);
out.print(sb);
out.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doGet(req, resp);
}
public static void main(String[] args) {
User user=new User("a","b");
String str="";
if(user!=null){
JSONArray array=JSONArray.fromObject(user);
str=array.toString();
}
System.out.println(str);
}
}
前端页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//Ajax开始的时候，#tip元素显示；结束时，隐藏；
$("#tip").ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
//下面设置按钮的单击事件;
$("#btnLogin").click(function(){
//发送异步请求，设置参数；
$.ajax({
url:'LoginServlet',
type:'post',
data:$("#userForm").serialize(),//序列化form，右括号
dataType:'json',
success:function(data){
//成功调用函数中，根据返回的json对象进行判断;
//如果有name属性代表登录成功，否则为失败
if(data.name){
$(".divTitle").html("<span>登录成功</span>");
$(".clsShow").html("欢迎你"+data.name+" "+"登录<br/>密码:"+data.pwd);
}else{
$("#divError").html("用户名或密码错误").show();//display:block
}
},
error:function(xhr,msg){alert(msg);}
});
});
});
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<span>用户登录</span>
</div>
<div class="divContent">
<div id="tip">全力登录中,请稍后...</div>
<div class="clsShow">
<div id="divError" class="divError"></div>
<!-- 给Form设置一个ID -->
<form id="userForm">
<!-- 要序列化的表单字段必须有name属性 -->
<div>
名称：<input type="text" id="username" name="username" class="txt"/>
</div>
<div>
密码:<input type="password" id="userpwd"name="userpwd"class="txt">
</div>
<div><!-- 最后一个div包含两个按钮 -->
<input type="button"id="btnLogin" value="登录" class="btn"/>
<input type="reset" id="btnReset"value="取消"class="btn"/>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
针对json数据的处理，大家可以使用json-lib.jar包或gson包，将实体类对象转化为字符串进行回传
JSP AJAX之Form序列化登录体验的更多相关文章
- Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用
1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...
- ajax提交form表单资料详细汇总
一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...
- springMVC+jsp+ajax上传文件
工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...
- ajax提交form表单
1. ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单. 2. from视图部分 <form id="loginF ...
- JSP内置对象---用户登录页面（get和post）
Login.jsp 页面: <%@ page language="java" import="java.util.*" contentType=" ...
- jsp+ajax实现无刷新
jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...
- 今天在研究jquery用ajax提交form表单中得数据时，学习到了一种新的提交方式
今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...
- ajax提交form表单问题
form表单提交数据可以省下大量大量获取元素的代码,局部刷新时也可以用ajax提交form表单,但是要先把表单序列化,再把后台javaBean对象序列化,但是你有可能前后台都执行了系列化,但是后台还是 ...
- Ajax提交form表单内容和文件（jQuery.form.js）
jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...
随机推荐
- js实现监听浏览器窗口大小改变事件
window.onresize = function(){ }
- flask的模板
flask用的是jinja2的模板 模板其实是一个包含响应文本的文件,其中用占位符(变量)表示动态部分,告诉模板引擎其具体的值需要从使用的数据中获取 使用真实值替换变量,再返回最终得到的字符串,这个过 ...
- Linux安装mysql以及安装时踩下的坑
安装: 检测是否已经安装了mysql rpm -qa | grep mysql 如果已经安装了,将其卸载,如: rpm -e --nodeps mysql-libs-5.1.71-1.el6.x86 ...
- PRO*C 函数事例 2 -- 数据库操作
Pro*C Oracle 的嵌入式开发,数据库处理部分最好能提取到一个模块,按照对不同数据库表的操作分成不同的.pc文件(如 DbsInstStat.pc).将此模块编译成库(c文件编译时链接此库), ...
- C#属性默认值设置
关于在MVC中view中设置默认值,可以象如下设置: 1.关于VIEWMODEL的部分 如果是C# 6.0,网上资料查到说可以 如果语法不支持,只能改回.net 2.0的写法. public cla ...
- C++调用Asprise OCR识别图片
在一个识别软件中发现了Asprise OCR的"身影",上官网查了一下相关信息,发现功能挺强大的,识别印刷体应该不错,遗憾的是好像不能识别中文,不过不知道它对扭曲后的英文识别能力怎 ...
- MySQL用户权限控制一例
Preface I supposed we are encountering a situation that there's an anonymous user has connec ...
- C++学习003-#define 自定义宏
C++中可以用#define来定义自定义的宏 也可以用使用#define来定义常量 但是#define只是简单的替换,在定义常量的时候没有语法检测 所以在C++定义常量可以使用 Const修饰 #d ...
- Qt 在Label上面绘制罗盘
自己写的一个小小的电子罗盘的一个小程序,不过是项目的一部分,只可以贴绘制部分代码 效果如下图 首先开始自己写的时候,虽然知道Qt 的坐标系是从左上角开始的,所以,使用了算法,在绘制后,在移动回来,但是 ...
- bug单的提交
顶头信息 所属产品,所属项目,所属模块,影响版本,当前指派,bug类型:代码错误,界面优化,设计缺陷,性能问题,标准规范,其他,安全相关.bug标题,严重程度,优先级 缺陷描述 bug描述,预置条件, ...