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 ...
随机推荐
- python3笔记
python3 Python3 基本数据类型 Python 中有六个标准的数据类型: Numbers(数字) Python可以同时为多个变量赋值,如a, b = 1, 2. 一个变量可以通过赋值指向不 ...
- Leecode刷题之旅-C语言/python-13.罗马数字转整数
/* * @lc app=leetcode.cn id=13 lang=c * * [13] 罗马数字转整数 * * https://leetcode-cn.com/problems/roman-to ...
- java 解析xml 多命名空间问题
先贴段有命名空间的xml吧.. <feed xmlns:im="http://itunes.apple.com/rss" xmlns="http://www.w3. ...
- python2.7练习小例子(四)
4):题目:输入某年某月某日,判断这一天是这一年的第几天? 程序分析:以3月5日为例,应该先把前两个月的加起来,然后再加上5天即本年的第几天,特殊情况,闰年且输入月份大于2时需考虑多加一天. ...
- Fragment保持状态切换
在使用Activity管理多个Fragment时,每次切换Fragment使用的是replace,结果导致出现xxx is not currently in the FragmentManager异常 ...
- 3,SQL语句及数据库优化
1,统一SQL语句的写法 对于以下两句SQL语句,程序员认为是相同的,数据库查询优化器认为是不同的. 所以封装成复用方法,用标准模板来控制. select*from dual select*Fr ...
- 【连载】Maven系列(三) 进阶
相关文章: 1.<用起来超爽的Maven——入门篇> 2.<用起来超爽的Maven——进阶篇> 一.Maven坐标: Maven世界拥有大量需要构建jar文件,我们需要找一个用 ...
- Autofac小例子
AutoFac是.net平台下的IOC容器产品.今天学习一下它的使用方法. 1.最简单的使用. public interface ITestDao { string SayHello(); } pub ...
- TestNG执行测试用例的顺序
import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.WebEle ...
- PL/SQL查看表结构
SET LONG 99999;SET LINESIZE 140 PAGESIZE 1000;SELECT DBMS_METADATA.GET_DDL('&OBJECT_TYPE','& ...