XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

Jquery实现ajax比原生ajax要简单方便，减少冗余代码。不需要记住太多的属性，类型。操作简单。

ajax常用的属性有：URL （请求路径） Type(请求方式)   data（请求需要的数据）

页面代码:

<%--

  Created by IntelliJ IDEA.

  User: 秀清风

  Date: 2018/12/28

  Time: 12:18

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<html>

<head>

    <title>Title</title>

</head>

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>

<script type="text/javascript" >

    $(function  () {

        $("[name=uname]").blur(function () {

            $.ajax({

                url:"${pageContext.request.contextPath}/ajaxServlet",//目标路径

                type:"post",//请求格式

                data:"uname="+$("[name=uname]").val(),//请求的数据

                dataType:"text",//请求数据的类型

                success:function(data){

                   uname=$("[name=uname]").val();

                    if (data=="true"){

                        $("#msg").html("用户名已被注册");

                        $("#msg").css('color','red');

                    } else if(data=="false"&&uname!=""){

                        $("#msg").html("用户名可以使用");

                        $("#msg").css('color','green');

                    }else {

                        $("#msg").html("用户名不可为空");

                        $("#msg").css('color','red');

                    }

                }

            });

        });

    });

</script>

<body>

<form  method="post" >

    用户名：<input type="text" id="uname" name="uname" ><span id="msg"></span><br>

    密码： <input type="text" id="upwd" name="upwd">

</form>

</body>

</html>

servlet代码：

package cn.happy.Servlet;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

public class AjaxServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String action=request.getParameter("uname");//获取到用户输入框

        System.out.println(action);

        if (action.equals("admin")){//输入框的值为admin,显示用户名已被注册

            response.getWriter().write("true");//使用响应的写入功能

        }else{

            response.getWriter().write("false");

        }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doPost(request,response);

    }

}

效果：

Jquery Ajax Realize whether the user is registered的更多相关文章

  1. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  2. jquery ajax解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

  3. jQuery.ajax 根据不同的Content-Type做出不同的响应

    使用H5+ASP.NET General Handler开发项目,使用ajax进行前后端的通讯.有一个场景需求是根据服务器返回的不同数据类型,前端进行不同的响应,这里记录下如何使用$.ajax实现该需 ...

  4. jQuery.ajax(url,[settings])

    概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象. ...

  5. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  6. jQuery Ajax传值给Servlet,在Servlet里Get接受参数乱码的解决方法

    最近在学jquery ui,在做一个小功能的时候需要将前台的值获取到,通过Ajax传递给Servlet,然后再在返回数据结果,但是在Servlet接受参数的时候,通过后台打印,发现接受乱码,代码示例如 ...

  7. JQuery+Ajax+Struts2+Hibernate 实现完整的登录注册

    写在最前: 下午有招聘会,不想去,总觉得没有准备好,而且都是一些不对口的公司,可是又静不下心来,就来写个博客. 最近在仿造一个书城的网站:http://www.yousuu.com ,UI直接拿来用, ...

  8. 用.NET MVC实现长轮询，与jQuery.AJAX即时双向通信

    两周前用长轮询做了一个Chat,并移植到了Azure,还写了篇博客http://www.cnblogs.com/indream/p/3187540.html,让大家帮忙测试. 首先感谢300位注册用户 ...

  9. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

随机推荐

  1. OO课程第三次总结QWQ

    调研,然后总结介绍规格化设计的大致发展历史和为什么得到了人们的重视 emmm为这个问题翻遍百度谷歌知乎也没有得到答案,那我就把自己认为最重要的两点简要说明一下吧,欢迎大家补充~ 1.便于完成代码的重用 ...

  2. python-directory

    #!/usr/bin/python # --*-- coding: utf-8 --*-- directory={ "张三":16, "李四":46, &quo ...

  3. hbase_存储模型

    Hbase 是按列存储,所以每个列族存储在一个HDFS文件上. Hbase表中的行是按照rowkey字典序进行排列的,并且表格在行的方向上被分割为多个region(按照行进行分割的) region 是 ...

  4. mysql 1055

    在 /etc/my.cnf 文件里加上如下: sql_mode=NO_ENGINE_SUBSTITUTION

  5. Yarn的Linking dependencies特别慢的优化方法

    通过以下方法,可以提升部分速度: 把项目文件夹添加进杀毒软件的白名单 把Yarn的缓存文件夹(yarn cache dir查看路径)添加进杀毒软件白名单 把Yarn的安装目录添加进杀毒软件白名单 把N ...

  6. hashtable and hashmap

    hashmap的bucket 和 ‘负载因子’的介绍 https://blog.csdn.net/wenyiqingnianiii/article/details/52204136

  7. 对于新版本的webstorm对vue的支持

    webstorm 对于官方vue的支持,直到2017.1,这个版本,之后的版本不能直接安装vue插件,这时候就需要自己手动新建vue模板了

  8. springboot pom.xml记

    本文包括: springboot 基本pom.xml配置 热部署 配置打包插件 maven pom.xml配置详解 1. springboot 基本pom.xml配置 <project xmln ...

  9. mount的几个选项

    一.mount -o noatime表示在读文件时不去更改文件的access time属性了,所以该选项会提升mount操作的执行效率. 二.mount --bind:等同于 -o bind可用于挂载 ...

  10. Eclipse项目里面看源码和文档

    Eclipse项目里面看源码 1.新建项目列表 2.进入struts2-core-2.3.20.jar,双击之后,看不到源码 3.右键struts2-core-2.3.20.jar,选择propert ...