Json和Ajax的注册、登录功能页面demo

最新推荐文章于 2023-05-22 23:12:02 发布
VIP文章 最新推荐文章于 2023-05-22 23:12:02 发布
阅读量1.2k 收藏 8
点赞数 3
分类专栏： 努力学前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjc13348/article/details/114128663
版权
  1. 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">
    <title>Register</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="register">
        <p class="title" id="title">
            <span>登录</span>
            <span class="current">注册</span>
        </p>
    <div class="form">
        <div>
            <span>+86</span>
            <input type="text" class="user" id = "user" placeholder="请输入注册手机号">
            <i class="" id="user_icon"></i>
            <p class="user_info " id="user_info"></p>
        </div>
        <div>
            <input type="password" class="pwd" id="pwd" placeholder="请输入密码">
            <i class="" id="pwd_icon"></i>
            <p class="pwd_info" id="pwd_info"></p>
        </div>
        <p class="button">
            <a href="javascript::" id="sigup-btn" class="btn show">注册</a>
            <a href="javascript::" id="login-btn" class="btn">登录</a>
        </p>
    </div>
    </div>
    <script type="text/javascript" src="js/ajax.js"></script>
    <script>
        var user = document.getElementById("user"),  //用户名
            pwd = document.getElementById("pwd"),   //密码
            sigup = document.getElementById
最低0.47元/天 解锁文章
CookChopper
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Servlet+Ajax+JSON用户账号密码登录验证Demo
09-18
导入项目进eclipse,启动...然后访问:http://localhost:8080/yuansheng_ajax_login_demo/login.jsp 1.没有连接数据库,用户密码的数据为自定义的Map 2.使用简单的Servlet跳转 3.可按照Map中的数据 在前端 输入进行验证
使用AJAX和JSON实现简单的注册验证
m0_50661667的博客
02-03 477
使用AJAX和JSON实现简单的注册验证简易的注册页面使用ajax发送异步请求的servletdao层的查询数据库的方法附Druid连接池的工具类 服务器使用Tomcat9.0.36 简易的注册页面 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <bod
JQuery与AJAX制作的登录小案例（了解其中的每一个步骤）
qq_51066068的博客
04-26 577
JQuery与AJAX制作的登录小案例（了解其中的每一个步骤） 模拟登录的几大步骤（必知） 需要自己花时间多看看 实现效果：登录获取token，获取用户信息 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
利用Ajax&Json实现注册提示功能
小墨鱼的网络博客，不随大流的程序员世界...
05-08 1252
序言 ajax技术是现在网页开发中的流行技术，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。今天将来聊一聊如何利用ajax的和Json来实现网页注册时的提示功能。 项目概述 相关Json的jar包:点我下载，提取码：z35p 1.编写一个注册页面，设置好相应的用户名和密码。 2.利用ajax发送异步请求到findServlet页面中，查询该注册的用户名是否已存在。 4.导入相关的json.jar包,并加入相应的模块。 3.在findServlet中
使用Ajax读出json文件来进行一些操作（使用Ajax读取数据，并显示到网页中数据使用文本格式数据使用json格式）
qq_56715530的博客
11-15 5232
这一个可能对大佬来说是比较简单的，哈哈欢迎指正，咋也是刚学，老师布置的小作业，希望能帮助到大家（如果大家是写作业的话，建议不要直接复制上去，不然可能就会有挺多雷同，比较csdn是一个比较广为人知的平台，所以建议记得自己改一改哪怕是文字信息改改也行） 首先创建一个json文件名称为：“学生成绩.json” 下面是json文件： { "score":[ {"姓名":"张三","性别":"男","分数":90}, {"姓名":"李四","性别":"女","分数":98}, {"姓名":"王五
Ajax实现用户登录
m0_56557880的博客
11-09 6105
1.Ajax：定义 Ajax即Asynchronous(异步的) Javascript And XML，使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上 使用Ajax，使得前端和数据库实现交互，例如，在登录验证中，使得输入框旁边可以提示用户名是否存在 2.为什么使用Ajax 局部刷新，不重新加载网页的的情况下，对网页某个网页进行更新，提高性能。 3.语法： $.ajax使用方法 $.ajax({});中间添加内容，添加常用属性如下： 常用参数： 1、url 请求地址（相当于fo
JSON与Ajax共同实现简单的登录校验
神韵
09-06 1022
总体思路 1、创建web项目，导入json所需jar包 2、创建json.jsp页面，一个简单的登录页面 3、创建json.js，ajax请求 4、创建JsonServlet后台java，编写并响应JSON字符串（不涉及到数据库，简单的用判断带过） 代码实现 json.jsp <%@ page language="java" contentType="text/html...
jquery ajax servlet json简单demo
03-06
jquery ajax servlet json简单demo
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
12-10
看了“使用hibernate实现树形结构无限级分类”这篇文章后，我也想将自己在所有开发的项目中使用的功能模块树的实现方法以及完整DEMO(含源码)贴出来和大家分享。其实在我的博客里是老早贴出来的，由于时间关系没好好...
easyui+ajax+json+servlet实现用户登录注册简单demo
03-14
如题，本例运用了easyui前台框架，用ajax提交表单数据，简单的servlet实现后台，适合新手，让你明白ajax,json等的用法。有什么问题可以留言。
登陆与注册接口JSON
08-02
本包描写的登陆接口与注册接口。利用sevrlet编写的JSON接口，提供给APP端获取及注册，不含糊，真实可用。
Jquery+Ajax实现用户注册与登入（Asp.Net版）
07-21
非常实用的Jqery和Ajax的实现用户注册和登入功能。 另外附送美女图像一张，呵呵。
Ajax_Json_jQuery详细Demo
10-10
Ajax、json、jQuery的常用Demo 对于初学者用巨大的帮助，里面涉及到全面的应用例子Demo，希望对于web开发者有帮助的作用。
JSON+AJAX完成用户登录
弱水三千、先干为敬
09-15 2019
1、JSON 1.1 json简介 JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。完全独立于编程语言的文本格式来存储和表示数据，易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。 1.2 json格式 1.以”{”开始,以”}”结束. 2.对象中的属性名和属性值使用”:”分割, 3.多个属性之间,使用”,”分割 ...
使用json、Ajax完成登录
SweetSFF的博客
06-25 490
使用ajax完成登录 1、jsp页面中修改提交按钮的类型为button，并添加onclick事件； 2、引入jQuery插件库，在 <script>中定义函数，在单击按钮时调用该函数； 3、使用jQuery集成ajax语法 $.ajax({ url:“xxx.do”, //请求地址 type:“POST”, //提交方式 data:{键名:值,键名:值}, //请求数据 success:function(data){ //服务器成功处理请求后的回调函数 console.log(“返回数
如何用ajax做登录页面,ajax如何制作登录页面？登录页面ajax的请求详解（附完整实例）...
weixin_35422396的博客
08-05 1482
本篇文章主要的讲述了关于ajax登录页面时ajax请求的内容，现在我们一起来看看这篇文章吧登录页面ajax请求一、登录验证提示信息//提交登录信息sub.on('click',function(e){e.preventDefault(); var username=$('.login_box #Account').val() var password=$('.login...
简单易懂：Ajax入门实例详解（登录功能）
最新发布
大三软件工程在读，喜爱编程，分享。
05-22 3240
Ajax（Asynchronous JavaScript and XML）是一种基于Web技术的编程实现方式，它使用JavaScript和XML来实现异步的数据交互。JavaScript负责发起请求和处理响应，而XML则负责将数据与页面分离。Ajax能够在不刷新整个页面的情况下更新页面内容，提高了页面的响应速度和用户体验。
ajax和json登录,使用ajax和json验证登录表单
weixin_39707597的博客
08-05 275
我正在使用ajax验证我的登录页面。并以json的格式从数据库中提取数据。我尝试了很多时间&它适用于我，但它打印时提醒xmlhttp.readyState < 4。使用ajax和json验证登录表单function hey(){x="'"+document.login_tsms.user.value+"'";y="'"+document.login_tsms.pass.value+"...
用Ajax Json实现登录与数据查询
qq_45742386的博客
10-27 900
MVC框架实现登录与数据查询 下面是效果展示： 下面是我的项目布局： index.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getSc...
ajax校验手机号是否已注册demo
05-12
下面是一个使用ajax校验手机号是否已注册的demo，前提是需要有一个后端接口返回手机号是否已被注册。 HTML代码： ``` <form> <label for="phone">手机号：</label> <input type="text" id="phone" name="phone" required> <div id="phone-error" class="error"></div> <button type="submit">提交</button> </form> ``` JavaScript代码： ``` $(document).ready(function() { // 监听表单提交事件 $('form').submit(function(event) { event.preventDefault(); // 阻止表单默认提交行为 // 获取表单数据 var phone = $('#phone').val(); // 发送ajax请求 $.ajax({ url: '/check_phone', // 后端接口地址 type: 'POST', dataType: 'json', data: { phone: phone }, success: function(data) { if (data.is_registered) { // 手机号已被注册 $('#phone-error').text('手机号已被注册'); } else { // 手机号未被注册，可以提交表单 $('form')[0].submit(); } }, error: function(xhr, status, error) { // ajax请求失败 console.log('ajax请求失败：', error); } }); }); }); ``` 在后端接口中，可以从请求参数中获取手机号，然后查询数据库中是否已有该手机号的记录，再将查询结果返回给前端。注意要返回一个JSON格式的数据，示例代码如下： ``` from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/check_phone', methods=['POST']) def check_phone(): phone = request.form.get('phone') is_registered = False # 假设手机号未被注册 # TODO: 查询数据库中是否已有该手机号的记录 # 如果已有记录，则将 is_registered 设置为 True return jsonify({'is_registered': is_registered}) ``` 以上代码仅供参考，实际使用时需要根据具体情况进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值