案例：

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

　　　在注册页面，填写完用户名且该栏失去焦点时，前端会进行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. Saint John Festival Gym - 101128J (凸包二分)

    Problem J: Saint John Festival \[ Time Limit: 1 s \quad Memory Limit: 256 MiB \] 题意 给出\(n\)个大点,和\(m\ ...

  2. 数组排序代码，冒泡排序&快速排序&选择排序

    冒泡排序: for(var i=0;i<arr.length-1;i++){ for(var j=0;j<arr.length-1-i;j++){ if(arr[j]>arr[j+1 ...

  3. 洛谷2051 [AHOI2009]中国象棋

    题目链接 题意概述:n行m列棋盘放若干个棋子每行每列最多两个求方案总数,答案对9999973取模. 可以比较容易看出这是个dp,设f[i][j][k]表示前i行j列放1个棋子k列放2个棋子的方案总数. ...

  4. Kafka（三）High Availability 高可用

    参考文档: http://www.jasongj.com/2015/04/24/KafkaColumn2/#ACK%E5%89%8D%E9%9C%80%E8%A6%81%E4%BF%9D%E8%AF% ...

  5. 考勤打卡机导出的excel考勤时间表如何生成实用的考勤表

    该excel表有如下结构 姓名\日期 周1 周2 周3 周4 周5 张三 7:3518:02 7:3518:02 7:46   17:56 李四 7:3518:02 7:02 18:00 18:02 ...

  6. 013 mint-ui

    一:概述 1.中文文档 https://mint-ui.github.io/#!/en 2.安装包 二:mt-button的使用 主要是介绍css-component 1.程序 在App.vue下面写 ...

  7. Android Studio的下载、安装与配置

    1 下载 下载地址:http://www.android-studio.org/index.php ☟这里下载的是3.1.2版本 2 安装与配置 2.1 初步安装 默认就可以,点击红框内按钮依次进行安 ...

  8. odoo开发笔记 -- odoo权限管理

    odoo框架 整体权限可以分为4个级别: (1) 菜单级别: 不属于指定菜单所包含组的用,看不到相应菜单.不安全,只是隐藏菜单,若用户知道菜单ID,仍然可以通过指定URL访问(2) 对象级别: 对某个 ...

  9. Docker 安装 ActiveMQ

    搜索 ActiveMQ 镜像 docker search activemq 获取 ActiveMQ 镜像 docker pull webcenter/activemq 查看本地镜像 docker im ...

  10. 使用Python解压zip、rar文件

    解压 zip 文件 基本解压操作 import zipfile ''' 基本格式:zipfile.ZipFile(filename[,mode[,compression[,allowZip64]]]) ...