案例：

　　* 校验注册用户名是否存在

　　　在注册页面，填写完用户名且该栏失去焦点时，前端会进行ajax传输该内容与后台数据库进行比对，

　　　若数据库中没有该用户名，则用户栏后显示“用户名可用”，反之，则显示"此用户名太受欢迎,请更换一个"。

如：

注册页面：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册页面</title>

    <script src="js/jquery-3.3.1.min.js"></script>

    <script>

        //在页面加载完成后

        $(function () {

           //给username绑定blur(失去焦点)事件

       ‘    $("#username").blur(function () {

               //获取username文本输入框的值

               var username = $(this).val();

               //发送ajax请求

               //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}

               //                         {"userExsit":false,"msg":"用户名可用"}

               $.get("findUserServlet",{username:username},function (data) {

                   //判断userExsit键的值是否是true

                   // alert(data);

                   var span = $("#s_username");

                   if(data.userExsit){

                       //用户名存在

                       span.css("color","red");

                       span.html(data.msg);

                   }else{

                       //用户名不存在

                       span.css("color","green");

                       span.html(data.msg);

                   }

               });

           });

        });

    </script>

</head>

<body>

    <form>

        <input type="text" id="username" name="username" placeholder="请输入用户名">

        <span id="s_username"></span>

        <br>

        <input type="password" name="password" placeholder="请输入密码"><br>

        <input type="submit" value="注册"><br>

    </form>

</body>

</html>

findUserServlet：

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.util.HashMap;

import java.util.Map;

@WebServlet("/findUserServlet")

public class FindUserServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1.获取用户名

        String username = request.getParameter("username");

        //2.调用service层判断用户名是否存在

        //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}

        //                         {"userExsit":false,"msg":"用户名可用"}

        //设置响应的数据格式为json

        response.setContentType("application/json;charset=utf-8");

        Map<String,Object> map = new HashMap<String,Object>();

　　　　　//这里就不进行数据库查询了，假定是和“tom”比对

        if("tom".equals(username)){

            //存在

            map.put("userExsit",true);

            map.put("msg","此用户名太受欢迎,请更换一个");

        }else{

            //不存在

            map.put("userExsit",false);

            map.put("msg","用户名可用");

        }

        //将map转为json，并且传递给客户端

        //将map转为json

        ObjectMapper mapper = new ObjectMapper();

        //并且传递给客户端

        mapper.writeValue(response.getWriter(),map);

    }

}

需要注意的是：

　　服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：

　　　　1. $.get(type):将最后一个参数type指定为"json"
　　　　2. 在服务器端设置MIME类型
　　　　　　response.setContentType("application/json;charset=utf-8");

JSON学习(三)的更多相关文章

  1. DjangoRestFramework学习三之认证组件、权限组件、频率组件、url注册器、响应器、分页组件

    DjangoRestFramework学习三之认证组件.权限组件.频率组件.url注册器.响应器.分页组件   本节目录 一 认证组件 二 权限组件 三 频率组件 四 URL注册器 五 响应器 六 分 ...

  2. python 全栈开发，Day94(Promise,箭头函数,Django REST framework,生成json数据三种方式,serializers,Postman使用,外部python脚本调用django)

    昨日内容回顾 1. 内容回顾 1. VueX VueX分三部分 1. state 2. mutations 3. actions 存放数据 修改数据的唯一方式 异步操作 修改state中数据的步骤: ...

  3. day91 DjangoRestFramework学习三之认证组件、权限组件、频率组件、url注册器、响应器、分页组件

    DjangoRestFramework学习三之认证组件.权限组件.频率组件.url注册器.响应器.分页组件   本节目录 一 认证组件 二 权限组件 三 频率组件 四 URL注册器 五 响应器 六 分 ...

  4. Spring Boot 项目学习 (三) Spring Boot + Redis 搭建

    0 引言 本文主要介绍 Spring Boot 中 Redis 的配置和基本使用. 1 配置 Redis 1. 修改pom.xml,添加Redis依赖 <!-- Spring Boot Redi ...

  5. day 89 DjangoRestFramework学习三之认证组件、权限组件、频率组件、url注册器、响应器、分页组件

    DjangoRestFramework学习三之认证组件.权限组件.频率组件.url注册器.响应器.分页组件   本节目录 一 认证组件 二 权限组件 三 频率组件 四 URL注册器 五 响应器 六 分 ...

  6. Salesforce LWC学习(三十九) lwc下quick action的recordId的问题和解决方案

    本篇参考: https://developer.salesforce.com/docs/component-library/bundle/force:hasRecordId/documentation ...

  7. HTTP学习三：HTTPS

    HTTP学习三:HTTPS 1 HTTP安全问题 HTTP1.0/1.1在网络中是明文传输的,因此会被黑客进行攻击. 1.1 窃取数据 因为HTTP1.0/1.1是明文的,黑客很容易获得用户的重要数据 ...

  8. TweenMax动画库学习(三)

    目录               TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)           ...

  9. Struts2框架学习(三) 数据处理

    Struts2框架学习(三) 数据处理 Struts2框架框架使用OGNL语言和值栈技术实现数据的流转处理. 值栈就相当于一个容器,用来存放数据,而OGNL是一种快速查询数据的语言. 值栈:Value ...

随机推荐

  1. Nginx 代理到Jetty 页面跳转端口改变问题

    Nginx安装 Windows下部署Nginx只需下载安装包,解压启动服务器即可.下载官网:http://nginx.org/en/download.html 操作Nginx首先进入安装文件夹: 查看 ...

  2. sql 记录一次灾难 游标问题

    起因:游标执行存储过程 下载begin 外面了.. ,造成一直触发存储过程 收获:定义变量统一在游标外部使用, 书写内容在begin 内部书写 alter PROCEDURE USP_dgd_wzh_ ...

  3. 文件夹上传插件webupload插件

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

  4. 在WinDbg中显示和搜索std::map内容

    我们希望在WinDbg中自动显示.搜索和过滤std::map对象.std::vectors的脚本相对简单,因为vectors中数据的平面结构:map是更复杂的野兽.具体地说,Visual C++ ST ...

  5. Python I/O编程 --读写文件、StringIO/ BytesIO

    I/O编程 Input/Output  输入/输出 Stream(流)是一个很重要的概念,可以把流想象成一个水管,数据就是水管里的水 Input Stream就是数据从外面(磁盘.网络)流进内存,Ou ...

  6. C++ Boost

    Boost库是一个可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的开发引擎之一. Boost库由C++标准委员会库工作组成员发起,其中有些内容有望成为下一代C++标准库内容.在C+ ...

  7. linux命令之------部分细节点

    创建文件夹/文件命令以及清除模式 mkdir +文件夹名字 touch +文件名字 rm -fr 删除文件,文件夹 -f强制删除 -r是递归 查询linux下所有启动的线程: ps -ef|grep ...

  8. 计蒜客 41387.XKC's basketball team-线段树(区间查找大于等于x的最靠右的位置) (The Preliminary Contest for ICPC Asia Xuzhou 2019 E.) 2019年徐州网络赛

    XKC's basketball team XKC , the captain of the basketball team , is directing a train of nn team mem ...

  9. nginx之动静分离（nginx与php不在同一台服务器）

    nginx实现动静分离(nginx与php不在同一个服务器) 使用wordpress-5.0.3-zh_CN.tar.gz做实验 Nginx服务器的配置: [root@app ~]# tar xf w ...

  10. KD-Tree总结

    KD-Tree总结 问题引入 平面上有\(n\)个点,\(q\)组询问,每一次查询距离\((x,y)\)最近的点对,强制在线. 问题解决 暴力 显然我们可以直接枚举点然后算距离取\(min\),这样子 ...