案例:

* 校验用户名是否存在
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. collection-time-os-sys-json模块

    一.collections模块 美 [kə'lekʃənz] ,收集,收藏 在内置数据(dict  list  set  tuple)的基础上,collections模块海提供了几个常用的数据类型:c ...

  2. 893C. Rumor#谣言传播(赋权无向图&搜索)

    题目出处:http://codeforces.com/problemset/problem/893/C 题目大意:一个城中有一些关系圈,圈内会传播谣言,求使每个人都知道谣言的最小花费 #include ...

  3. axios 模拟同步请求

    axios本身没有同步请求,但是我们很多情况下必须得需要同步请求.那么应该怎么做? 上网查了一些资料有人说用es6的 async +  assert 我不知道有没有效果,因为我的功能中是没啥效果的. ...

  4. 吴裕雄--天生自然C语言开发:文件读写

    #include <stdio.h> int main() { FILE *fp = NULL; fp = fopen("/tmp/test.txt", "w ...

  5. python学习笔记(18)字典和json 的区别 和转换

    字典和json 的区别 和转换 前言:字典和json非常像.接下来比较一下两者的异同 先看一下字典的写法: a = {'a':'1', 'b':'2', 'c':'3' } 再看一下json的写法: ...

  6. RS232串口通信详解

    串口是计算机上一种非常通用的设备通信协议. ---------------------------------串口的引脚定义: 9芯 信号方向来自 缩写 描述 1 调制解调器 CD 载波检测 2 调制 ...

  7. 前端-js-长期维护

    ###############    JS简介和JS引入     ################ <!DOCTYPE html> <html lang="en" ...

  8. Robustness|Variability|Diversification|Complexity|自组装|

    生命组学 进化方向有以下四个特性:Robustness:变稳定,比如杀虫剂最大浓度也有杀不死的虫子.Variability易变性与Diversification多样性,容易变多和变多.Complexi ...

  9. CentOS换yum源和epel源为国内源

    CentOS换源 YUM源 备份原来的repo文件 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bac ...

  10. js引入的几种简单写法

    [方法一]   <script>     function loadScript() {        var script = document.createElement(" ...