案例：

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

　　　在注册页面，填写完用户名且该栏失去焦点时，前端会进行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. 电商平台＋keepalived高可用

    192.168.189.131 电商平台 192.168.189.129 MySQL主192.168.189.130 MySQL备192.168.189.181 VIP 配置MySQL为互为主从并结合 ...

  2. 文件描述符fd,struct files_struct

    程序可以理解为硬盘上的普通二进制文件:进程是加载到内存中的二进制文件,除了加载到内存中的二进制文件外,还附有所有对于该二进制文件描述信息的结构体,描述该进程的结构体叫PCB(进程控制块),在这就不在讨 ...

  3. “知乎杯”2018 CCF 大学生计算机系统与程序设计竞赛 分组加密器（encryption）

    分组加密器(encryption) 题解点这里 #include<map> #include<stack> #include<vector> #include< ...

  4. 统计学基础知识（一）---描述统计学（Descriptive Statistics）

    描述统计学(Descriptive Statistics):将数据的信息以表格, 图形或数值的形式进行汇总. 数据类型:分为定量数据(数值型数据)和定性数据(类别型数据).数值型数据又可以分为连续型和 ...

  5. trutle库的使用基础

    turtle库的使用: 概括: turtle绘图体系:1969年诞生,主要用于程序设计入门 Python语言的标准库之一 入门级的图形绘制函数库 原理: turtle的原(wan)理(fa) (tur ...

  6. IIS服务器部署web应用《一》

    最近了解到开发用iis部署环境,于是了解了下. IIS用于部署web应用,其简单,配置方便,可以用作本地机器作为服务器进行部署.且所在部署系统为windows,便于使用iis. 端口80需要修改为别的 ...

  7. 论文阅读：Single Image Dehazing via Conditional Generative Adversarial Network

    Single Image Dehazing via Conditional Generative Adversarial Network Runde Li∗ Jinshan Pan∗ Zechao L ...

  8. Linux后台运行和关闭程序、查看后台任务

    fg.bg.jobs.&.ctrl+z   1.&    (最经常被用到)     这个用在一个命令的最后,可以把这个命令放到后台执行   2.ctrl + z     可以将一个正在 ...

  9. Eclipse4.9集成Tomcat 9.0.21详细版

    1.下载Tomcat 从Tomcat官网下载:https://tomcat.apache.org 此处我下载的版本是Tomcat 7.0.94 下载完毕后解压即可,我解压后的路径是D:\soft\ap ...

  10. 利用sftp迁移pve虚拟机

    首先在A主机进行虚拟机备份vzdump <vmid>在B主机利用sftp复制备份到A主机cd /var/lib/vz/dump/sftp root@192.168.25.140 回答yes ...