您的位置：首页 > Web前端 > JavaScript

JSP AJAX之Form序列化登录体验

2016-11-23 20:48 225 查看

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="userForm">

<div>
名称：<input type="text" id="username" name="username" class="txt"/>
</div>
<div>
密码:<input type="password" id="userpwd"name="userpwd"class="txt">
</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包，将实体类对象转化为字符串进行回传

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航