Jquery通过Ajax发送Json数据到后台验证模拟登陆操作demo

最新推荐文章于 2023-11-20 21:35:13 发布
最新推荐文章于 2023-11-20 21:35:13 发布
阅读量2.6k 收藏 7
点赞数
分类专栏： Java 文章标签： javascript Jquery Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35255384/article/details/79684986
版权

-----------编写注册页面，点击注册时先进行Ajax请求后台校验，然后校验通过则跳转到成功页面，否则当前页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>
    <script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#username").blur(function(){
                if($("#username").val()==null || $("#username").val()==""){
                    alert("请输入用户名！");
                    return;
                }                                
            });
            $("#password").blur(function(){
                if($("#password").val()==null || $("#password").val()==""){
                    alert("请输入密码！");
                    return;
                }    
            });
            $("#confirmpassword").blur(function(){
                if($("#confirmpassword").val()==null || $("#confirmpassword").val()==""){
                    alert("请输入确认密码！");
                    return;
                }
            });
            $("#piccode").blur(function(){
                if($("#piccode").val()==null || $("#piccode").val()==""){
                    alert("请输入验证码！");
                    return;
                }
            });            
            //校验函数封装
            function validate(){
                if($("#username").val()==null || $("#username").val()==""){
                        alert("请输入用户名！");
                        return false;
                }    
                if($("#password").val()==null || $("#password").val()==""){
                        alert("请输入密码！");
                        return false;
                }
                if($("#confirmpassword").val()==null || $("#confirmpassword").val()==""){
                        alert("请输入确认密码！");
                        return false;
                }
                if($("#piccode").val()==null || $("#piccode").val()==""){
                    alert("请输入验证码！");
                    return false;
                }    
                return true;
            }
            
            //验证码图片点击后切换更新
            $("#img_piccode").click(function(){
                var date=new Date();
                $("#img_piccode").attr('src',"<%=request.getContextPath()%>/servlet/ImageServlet?date"+date);
            });    
            //做最后一道校验，点击注册时
            $("#register").click(function(){
                if(!validate()){
                    return;
                }else{
                    if(($("#username").val()!=null && $("#username").val()!="") && ($("#password").val()!=null && $("#password").val()!="")
                            && ($("#confirmpassword").val()!=null && $("#confirmpassword").val()!="")){
                        var data={"username":$("#username").val(),"password":$("#password").val()};
                        var jsonArrayFinal = JSON.stringify(data);//string类型
                        $.ajax({
                            url:"servlet/LoginServlet",
                            type:"GET",
                            dataType:"java",
                            data:{"user":jsonArrayFinal},
                            success:function(data){
                                if(data=="0"){
                                    alert("验证通过，请继续执行");
                                    $("#form1").submit();
                                }else{
                                    alert("验证失败，请重新输入账号密码！");
                                    return;
                                }
                            },
                            error:function(){
                                alert("失败了！");
                            }
                        });
                    }
//                     $("#form1")[0].submit();
                }
            });
            //点击重置按钮重新清空form表单
            $("#rollback").click(function(){
                $("#form1")[0].reset();
//                 window.location.reload();
            });
        });
        
    </script>
    <style type="text/css">
        #register,#rollback{
            background-color:red;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <form id="form1" action="login.jsp">
        <table>
            <tr>
                <td>用户名：</td>
                <!-- 发送异步请求来进行校验 -->
                <td><input type="text" name="username" id="username"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="password" id="password"></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" name="confirmpassword" id="confirmpassword"></td>
            </tr>
            <tr>
                <td>验证码：</td>
                <td><input type="text" name="piccode" id="piccode">&nbsp;&nbsp;<img alt="验证码" src="<%=request.getContextPath()%>/servlet/ImageServlet" id="img_piccode"></td>
            </tr>
            <tr>
                <td><span id="register">注册</span></td>
                <td><span id="rollback">重置</span></td>
            </tr>
        </table>
    </form>
</body>

</html>

--------编写后台验证码图片代码编写

package com.servlet;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ImageServlet extends HttpServlet{
    private static final Integer WIDTH=64;
    private static final Integer HEIGHT=30;
    private static final Integer BK_COLOR1=220;
    private static final Integer BK_COLOR2=250;
    private static final Integer BK_COLOR3=250;
    //生成4位数的验证码数组
    private static final Integer SIZE=4;
    public static final String[] DATAS=new String[]{"0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"};
    //设置字体大小
    private static final int FONTSIZE=30;
    //输出图片格式
    private static final String FORMATNAME="png";
    //干扰线条数
    private static final Integer LINESIZE=10;
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
        BufferedImage image=new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_BGR);//获取图片对象 指定宽高
        Graphics graphics=image.getGraphics();//获取画笔对象
        graphics.setColor(new Color(BK_COLOR1, BK_COLOR2, BK_COLOR3));//指定背景颜色
        graphics.fillRect(0, 0, WIDTH, HEIGHT);//画边框
        Random random=new Random();//获取随机数对象
        StringBuffer sBuffer=new StringBuffer();
        for(int i=0;i<SIZE;i++){
            int whichOne=random.nextInt(DATAS.length);
            String data=DATAS[whichOne];
            graphics.setColor(new Color(random.nextInt(DATAS.length)*i+100, random.nextInt(DATAS.length)*i+100, random.nextInt(DATAS.length)*i+100));//继续用画笔画背景颜色
            graphics.setFont(new Font("宋体", Font.BOLD,FONTSIZE));
            //开始将字符绘制到图片上
            graphics.drawString(data, 13*i+8, 23);
            for(int j=0;j<LINESIZE;j++){
                int x=random.nextInt(WIDTH);
                int y1=random.nextInt(HEIGHT);
                int x1=random.nextInt(WIDTH)+x;
                int y=random.nextInt(HEIGHT)+y1;
                graphics.setColor(new Color(192, 192, 192));
                graphics.drawLine(x, y, x1,y1);                
            }            
            sBuffer.append(data);
        }
        req.setAttribute("piccode", sBuffer.toString());
        ImageIO.write(image, FORMATNAME, res.getOutputStream());
    }
    
}

--------------编写Ajax发送过来的json数据，返回java类型对象，0表示成功，1表示失败

package com.servlet;

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.JSONObject;

public class LoginServlet extends HttpServlet{

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
        //后台获取Json数据
        String userJson=req.getParameter("user");
        PrintWriter pWriter=res.getWriter();
        JSONObject jsonObject=JSONObject.fromObject(userJson);
        String userName=(String) jsonObject.get("username");
        String password=(String) jsonObject.get("password");
        System.out.println("用户名为："+userName+",密码为:"+password);
        if(userName.equals("itcast") && password.equals("123456")){
            pWriter.print("0");
        }else{
            pWriter.print("1");
        }
        pWriter.flush();
        pWriter.close();
    }
    
}

---------------编写登录成功页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>
<body>
    <%
        String userName=request.getParameter("username");
        String password=request.getParameter("password");
    %>
</body>
    <div>欢迎用户<%=userName %>登录！</div>
    <div>账号:<%=userName %>;密码:<%=password %></div>
</html>



远方的、远方的、、、
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Json和Ajax的注册、登录功能页面demo
hjc13348的博客
02-26 1241
HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit.
S2SH整合JQuery+Ajax实现登录验证功能实现代码
01-21
不多说了，上码 action 代码如下: package com.lk.action; import javax.annotation.Resource; import com.googlecode.jsonplugin.annotations.JSON; import com.lk.service.StudentControl; import com.opensymphony.xwork2.ActionSupport; public class LoginAjaxAction extends ActionSupport { private String username; private
标准jquery ajax ,发送json数据
dmwdmc的专栏
05-30 122
这里有两种做法。 做法1： 前端 test.jsp [code="java"] Button $("#Load").click(function(){ var postData = {name:"John",location:"Boston"}; $.ajax({ url:"https://localhost:9444/HK...
jq ajax 发json数据库,Jquery AJAX向服务端发送json
weixin_33324197的博客
08-05 476
Jquery AJAX向服务端发送json这只是简单用法,其主要是调用jquery中的ajax方法,这里写的东西都是给ajax方法传递的参数type: 是请求类型,例如get,postcontentType: 声明ajax通讯中,使用的数据类型url: 请求地址,可以是相对的或绝对地址data: 数据,通常使用的都是json,这不是必须的success: 给ajax传递一个函数用于执行返回状态20...
Jquery通过ajax发送json类型参数
qq_43521551的博客
07-06 6968
jquery发送ajax请求 //js代码ajax请求 function sendimgtest(){ //确保已经下载并导入了该文件： <!-- <script src="js/jquery-3.5.0.min.js" --> obj = {}; obj.message = "ajax发送的参数"; $.ajax({ url: "http://127.0.0.1:8080/MyProject/ohello", data:null, type: "GET", dat
Jquery-ajax()方法提交json数据
weixin_30408675的博客
12-18 244
1.ajax()提交json数据代码 var strJson = getStrPayJson(); $.ajax({ type: "POST", url: "/usercenter/paycoupon", contentType: "application/json...
jquery教程ajax请求json数据示例
12-10
代码如下:$.ajax({ url: ‘这个地址要换成你自己的’, data: {S_CourseID: courseid , CurrTime : new Date().getTime()}, //加个时间戳，否则会不自动更新数据 dataType: ‘json’, success: function(data) {...
jQuery Ajax异步处理Json数据详解
10-26
在处理 JSON 数据时，jQuery 提供了便捷的方法来解析和操作这些数据。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。 在 jQuery 中使用 AJAX 处理 ...
jquery ajax servlet json简单demo
03-06
【jQuery AJAX】jQuery 是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理以及AJAX交互。AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分...
Ajax_Json_jQuery详细Demo
10-10
通过这些示例，你可以了解如何使用jQuery简化Ajax调用，以及如何处理JSON数据，从而更好地构建交互式的Web应用。在实践中，结合这些知识点，开发者可以创建出响应速度快、用户体验优良的现代网页。
使用json实现简单的登录
12-07
该项目使用json实现了登录的小例子，使用了java语言，jquery技术
Servlet+Ajax+JSON用户账号密码登录验证Demo
09-18
导入项目进eclipse,启动tomcat, 然后访问:http://localhost:8080/yuansheng_ajax_login_demo/login.jsp 1.没有连接数据库,用户密码的数据为自定义的Map 2.使用简单的Servlet跳转 3.可按照Map中的数据 在前端 输入进行验证
Java Web登录Demo（SSM+Ajax）
01-20
demo主要运用SSM框架完成用户的登录功能；demo集成了MyBatis反向生成工程；demo的后台运用了spring的自动注入、springMVC的请求驱动、MyBatis面向接口数据库编程技术；JSP前台和后台交互的响应模式；
jquery 的Ajax 传送json数据 模板
kataerdeshui的专栏
08-31 486
if(url.indexOf("tab100")!=-1){    var fb_id = $("#fbid").val();     $.ajax( {      url : "./DocFeedback.do?actionFlag=getHandlerFlag",
Ajax基础（应用场景｜jquery实现Ajax｜注意事项｜Ajax发送json数据｜Ajax携带文件数据）
最新发布
Mchen的博客
11-20 4933
AJAX翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互也是用XML进行数据传输（当然，传输的数据不只是XML，目前更多的使用Json数据）。（XML应用于Web开发的许多方面，常用于简化数据的存储和共享）AJAX不是什么新的编程语言，而是一种使用现有标准的新方法AJAX最大的优点就是不需要重新加载整个页面的情况下，可以与服务器交换数据并更新网页内容（简单来说就是，在网页前端刚输入完数据，后端其实已经验证完数据了，不需要等点击提交了）
ajax 发送 json格式,如何使用jquery / ajax将数据发送到json文件
weixin_39522486的博客
08-05 373
我发现了无数关于如何使用jQuery和Ajax从json文件中检索数据的教程，但是没有关于如何将 数据发布到json文件中的*教程。*。如果有人可以向我展示或给我发送有关如何执行此操作的小脚本，那就太好了。我到处都在搜索如何执行此操作，但是没有运气。我见过有人这样做的例子，但他们似乎忘记了分享我没有看到的重要信息。我使用ajax检索数据json文件没有问题。如果有人可以告诉我我是否忘记某件事或做错...
Jquery对ajax的支持及json对象
m0_73030012的博客
10-25 1066
var JSON对象 = { "name" : value, "name" : value, …… };如：var person = { "name" : "张三","age" : 30 };
项目：jSon和Ajax登录功能
weixin_30409849的博客
07-09 584
组件化网页开发 / 步骤二 · 项目：jSon和Ajax登录功能 要熟练编写封装的$.ajax({........}) 转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/11158159.html
ajax登录josn,在JSON登录AJAX POST请求
weixin_35538624的博客
08-06 399
我想创建一个非常简单的登录窗体使用AJAX服务器通信和PHP作为服务器端脚本。 作为一个起点，我只是试图通过JSON发送登录数据到服务器，但它已经给我提出了问题。在JSON登录AJAX POST请求问题是，当我通过AJAX的POST请求发送数据时，我的服务器似乎没有得到任何东西，根本没有返回任何数据。 下面是请求的HTML： Login experiment $(document).ready(f...
jquery ajax demo
09-17
jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画效果和AJAX等任务。AJAX (Asynchronous JavaScript and XML) 是一种在不重新加载整个页面的情况下，通过后台的异步请求与服务器进行数据交互的技术。 下面是一个简单的jQuery AJAX示例： HTML部分： ```html <button id="load-button">加载数据</button> <div id="data-container"></div> ``` JavaScript部分： ```javascript $(document).ready(function() { // 当点击按钮时，发送AJAX请求 $('#load-button').click(function() { $.ajax({ url: 'data.json', // 服务器上的数据文件路径 dataType: 'json', // 响应数据类型为JSON success: function(response) { // 当请求成功时，在data-container中显示返回的数据 $('#data-container').text(response.data); }, error: function() { // 当请求失败时，显示错误消息 $('#data-container').text('加载数据失败'); } }); }); }); ``` 上述代码首先在页面加载完成时绑定了一个事件处理函数，当按钮被点击时执行AJAX请求。请求发送到URL为"data.json"的数据文件，并且指定了响应数据类型为JSON。成功时，返回的数据会在"data-container"元素中显示，失败时会显示错误信息。 这只是一个简单的示例，你可以根据自己的需求对AJAX请求进行进一步的配置和处理。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

远方的、远方的、、、

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值