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序列化登录体验的更多相关文章

  1. Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用

    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...

  2. ajax提交form表单资料详细汇总

    一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...

  3. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

  4. ajax提交form表单

    1. ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单. 2. from视图部分 <form id="loginF ...

  5. JSP内置对象---用户登录页面（get和post）

    Login.jsp 页面: <%@ page language="java" import="java.util.*" contentType=" ...

  6. jsp+ajax实现无刷新

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...

  7. 今天在研究jquery用ajax提交form表单中得数据时，学习到了一种新的提交方式

    今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...

  8. ajax提交form表单问题

    form表单提交数据可以省下大量大量获取元素的代码,局部刷新时也可以用ajax提交form表单,但是要先把表单序列化,再把后台javaBean对象序列化,但是你有可能前后台都执行了系列化,但是后台还是 ...

  9. 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 ...

随机推荐

  1. mybatis报错：查询一对多或多对多时只返回一条数据的问题

    问题: 使用映射文件实现查询一对多或多对多时只返回一条数据问题 解决方法: 导致这种情况出现的问题是因为两个表中的主键是一样所以出现了数据覆盖问题. 解决方式一:修改数据库表中的主键(这种方法比较麻烦 ...

  2. Angular : 响应式编程, 组件间通信, 表单

    Angular 响应式编程相关 ------------------------------------------------------------------------------------ ...

  3. Java : java基础(1)

    java编译器有常亮优化机制,如果是常量的计算,会直接判断常量计算结果的取值范围,如果是变量,则没办法判断计算取值范围,编译会异常(如两个byte类型的变量相加). java中的常量指的是用 stat ...

  4. 《linux设备驱动开发详解》笔记——15 linux i2c驱动

    结合实际代码和书中描述,可能跟书上有一定出入.本文后续芯片相关代码参考ZYNQ. 15.1 总体结构 如下图,i2c驱动分为如下几个重要模块 核心层core,完成i2c总线.设备.驱动模型,对用户提供 ...

  5. 以源码安装的lamp环境为依托，源码安装zabbix监控系统

    1.源码安装lamp环境 1)安装httpd, 以源码httpd-2.4.33为基础,解压后,执行./configure --prefix=/usr/local/ --sysconfdir=/etc/ ...

  6. CPU计算密集型和IO密集型

    CPU计算密集型和IO密集型 第一种任务的类型是计算密集型任务,其特点是要进行大量的计算,消耗CPU资源,比如计算圆周率.对视频进行高清解码等等,全靠CPU的运算能力.这种计算密集型任务虽然也可以用多 ...

  7. python基础之socket套接字基础part2

    基于UDP的socket 面向无连接的不可靠数据传输,可以没有服务器端,只不过没有服务器端,发送的数据会被直接丢弃,并不能到达服务器端 1 #客户端 2 import socket 3 ip_port ...

  8. 4269: 再见Xor

    4269: 再见Xor 链接 分析: 和SGU 275唯一不同的就是需要求出次小值,那么异或出最大值的所有元素中,找到最小的,去除即可. 代码: #include<bits/stdc++.h&g ...

  9. 区分Oracle的数据库，实例，服务名，SID

    文章摘自:http://www.zhetao.com/content240 感谢分享O(∩_∩)O~ 在实际的开发应用中,关于Oracle数据库,经常听见有人说建立一个数据库,建立一个Instance ...

  10. Django admin操作

      无名小妖     昵称:无名小妖园龄:1年6个月粉丝:22关注:1 +加关注 搜索     常用链接 我的随笔 我的评论 我的参与 最新评论 我的标签 我的标签 Python(1) python3 ...