案例：

* 校验用户名是否存在

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

		1. $.get(type):将最后一个参数type指定为"json"

		2. 在服务器端设置MIME类型

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

源码：

1. 注册页面的完成：

需要参考的文档：





<!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>

  1. findUserServlet

     package cn.itcast.web.servlet;

 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>();

         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);

     }

     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
         this.doPost(request, response);
    
     }
    
 }

Ajax&Json案例的更多相关文章

  1. Ajax json jquery实现菜单案例

    需求: 运用AJAX请求文件menu.json,配置菜单栏,并实现以下功能点: 1. 点击向左箭头,菜单向左移动,隐藏 2. 点击向右箭头,菜单向右移动,显示3. 点击一级菜单,被点击菜单的子菜单显示 ...

  2. jQuery中的ajax用法案例

    什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载 ...

  3. Django（十二）视图--利用jquery从后台发送ajax请求并处理、ajax登录案例

    一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...

  4. struts2 + ajax + json的结合使用，实例讲解

    struts2用response怎么将json值返回到页面javascript解析,这里介绍一个struts2与json整合后包的用法. 1.准备工作 ①ajax使用Jquery:jquery-1.4 ...

  5. AJAX,JSON搜索智能提示

    效果 开发结构参考AJAX,JSON用户校验 主要有两个核心文件 1,处理输入字符,进行后台搜索的servlet Suggest.java package org.guangsoft.servlet; ...

  6. php ajax json jquery 记录

    php+jquery+ajax+json简单小例子 <html> <title>php+jquery+ajax+json简单小例子</title> <?php ...

  7. 练习 jquery+Ajax+Json 绑定数据 分类： asp.net 练习 jquery+Ajax+Json 绑定数据 分类： asp.net

    练习 jquery+Ajax+Json 绑定数据

  8. Jquery+ajax+json+servlet原理和Demo

    Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...

  9. 玩转Web之Json(一)-----easy ui+ajax + json 中关于Json的解析问题

    在easy ui中使用Ajax+Json实现前后的数据交互时,当后台数据传输到客户端是需对Json数据进行解析,这里将对Json数据解析做简单总结. (一) 对于服务器返回的数据若没有做类型说明,需要 ...

随机推荐

  1. TPO3-2Depletion of Ogallala Aquifer

    The vast grasslands of the High Plains in the central United States were settled by farmers and ranc ...

  2. ubuntu下pycharm的安装

    打开百度,输入pycharm下载,点击下图的第二个英文链接. 进入后选择linux下的Community进行下载,而左边的Professional是要钱购买的,当然花钱的体验效果肯定会更好. 下载完成 ...

  3. Mac环境下 Python3安装及配置

    1.mac 环境下安装 python3 .查看 mac 自带系统版本 #查看系统自带的python open /System/Library/Frameworks/Python.framework/V ...

  4. Centos7.5 firewalld防火墙配置

    CentOS 7.0默认使用的是firewall作为防火墙 1.查看firewall服务状态 systemctl status firewalld 2.查看firewall的状态 firewall-c ...

  5. 如何写JS库，JS库写法

    前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方 ...

  6. Cobbler_自动装系统

    Cobbler —自动装系统的操作步骤 Cobbler是一款自动化操作系统安装的实现,与PXE安装系统的区别就是可以同时部署多个版本的系统,而PXE只能选择一种系统. Cobbler 的安装 # 在一 ...

  7. B-Tree（B树）原理及C++代码实现

    B树是一种平衡搜索树,它可以看做是2-3Tree和2-3-4Tree的一种推广.CLRS上介绍了B树目前主要针对磁盘等直接存取的辅存设备,许多数据库系统也利用B树或B树的变种来存储信息. 本文主要针对 ...

  8. php先响应后处理

    php响应异步请求或者返回时效要求高的接口中,可以先响应输出,再执行逻辑处理保存数据等任务 ob_end_clean(); ob_start(); echo '{"data":&q ...

  9. linux误删除恢复(未验证）

    extundelete 大家基本都知道,在linux上误删除了东西后果是很严重的,尤其是在服务器上误删除了东西,对于字符终端,想要实现恢复删除的数据更是难上加难,对于Linux误删除了重要的东西,虽然 ...

  10. Tarjan模板——求强连通分量

    Tarjan求强连通分量的流程在这个博客讲的很清楚,再加上我也没理解透,这里就不写了. 缩点:将同一个连通块内的点视为同一个点. 扔一道模板题:codeVS2822爱在心中 第一问很显然就是求点数大于 ...