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. vue中部分api解释 （$nextTick）

    1:this.$nextTick(function(){ }) 传如的参数是一个函数 这个API主要是获取dom元素 为什么需要这个api,在vue框架开发中,更新dom是一个异步操作,如果更新完do ...

  2. new delate he typedef的含义

    new:        new 类型[初值] 如: new int ;                                     //开辟一个存放整数的存储空间,返回一个指向该存储空间的 ...

  3. SqlSever 使用 CROSS APPLY 与 OUTER APPLY 连接查询

    前言 日常开发中遇到多表查询时,首先会想到 INNER JOIN 或 LEFT OUTER JOIN 等等,但是这两种查询有时候不能满足需求.比如,左表一条关联右表多条记录时,我需要控制右表的某一条或 ...

  4. 桌面小部件Wight父类AppWidgetProvider的三个方法

    onUpdate()这个方法会在每次更新App Widget的时候调用,数据更新的逻辑都写在这个方法里边.而且要注意的是:在用户添加小部件的时候,会首先调用这个方法,应该在这个方法里进行初始化操作,比 ...

  5. tensorflow 源码编译

    https://blog.csdn.net/xsfl1234/article/details/67669707 https://blog.csdn.net/guxi123/article/detail ...

  6. Find them, Catch them POJ - 1703

    题意:N个人,M次操作,操作一:A X Y,X,Y不是同一帮派,操作二:D X Y,判断X和Y的关系. 思路:如果X和Y不是同一帮派,那X与Y+N.Y与X+N是同一帮派,如果X与Y不在同一帮派且X与Y ...

  7. qt网络通讯出现中文乱码

    转自:https://blog.csdn.net/i_fuqiang/article/details/21174227 发送: void TcpS::btn_send() { QByteArray d ...

  8. DAO和service的解释

    转自:http://blog.sina.com.cn/s/blog_4b1452dd0102wvox.html 我们都知道有了Hibernate后,单独对数据的POJO封装以及XML文件要耗损掉一个类 ...

  9. Python Flask学习笔记之模板

    Python Flask学习笔记之模板 Jinja2模板引擎 默认情况下,Flask在程序文件夹中的templates子文件夹中寻找模板.Flask提供的render_template函数把Jinja ...

  10. ADO.NET学习笔记（1）

    ADO.Net是.Net框架中为数据库的访问而封装的一个库.通过这个库我们可以简单便捷的访问数据库,并对数据库进行一些增删改查的操作,目前ADO.Net支持四种主流的数据库,分别是SQL.OLE DB ...