案例：

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

　　　在注册页面，填写完用户名且该栏失去焦点时，前端会进行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. 简述tcp三次握手

    第一次握手:建立连接时,客户端向服务端发送SYN(同步序列编号),其中包含客户端的初始序号seq(序列号)=x,并进入SYN_SENT(请求连接)状态,等待服务器确认. 第二次握手:服务器收到请求后, ...

  2. 我用AI(Adobe Illustrator CS6)合并路径的两个常用方法

    作为一个切图仔,经常与设计大佬的PSD打交道,PSD里面又有各种icon图标需要导出,偷懒的方法直接导出png图片,丢个背景图上页面完美解决问题!! 第二天来个需求,能不能把这个icon图标给我换个颜 ...

  3. Sherlock and His Girlfriend（信息学奥赛一本通 1623）

    [题目描述] 原题来自:Codeforces Round #400 B. Sherlock 有了一个新女友(这太不像他了!).情人节到了,他想送给女友一些珠宝当做礼物. 他买了 n 件珠宝.第 i 件 ...

  4. Unknown column 'startname' in 'field list

    Unknown column 'startname' in 'field list  字段匹配不上 解决思路 1.检查数据库字段名与sql中的字段名是否一致 2.是否为关键字或中英文区别 ,(关键字可 ...

  5. R3300L运行CoreELEC, EmuELEC和Armbian

    R3300L的参数 CPU: S905LRAM: Samsung K4B4G1646E-BCMA 512MB * 2 = 1GBROM: Samsung KLM8G1WEPD-B031 8GB eMM ...

  6. 015 vue的项目

    一:搭建项目 1.框架 在原有的基础上 src: 2.index.html <!DOCTYPE html> <html lang="en"> <hea ...

  7. 【JavaScript】JavaScript中的ActiveXObject对象

    JavaScript中ActiveXObject对象是启用并返回 Automation 对象的引用.    使用方法: newObj = new ActiveXObject( servername.t ...

  8. [转]iview render函数常用总结（vue render函数）

    原文地址:https://blog.csdn.net/weixin_43206949/article/details/89385550 iview 的render函数就是vue的render函数ivi ...

  9. Docker 安装 ActiveMQ

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

  10. Linux内核链表复用实现栈

    我们当然可以根据栈的特性,向实现链表一样实现栈.但是,如果能够复用已经经过实践证明的可靠数据结构来实现栈,不是可以更加高效吗? so,今天我们就复用Linux内核链表,实现栈这样的数据结构. 要实现的 ...