Jquery Ajax Realize whether the user is registered

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

效果:

原文地址:https://www.cnblogs.com/java-263/p/10191552.html

时间: 12-28

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

jquery ajax 方法及各参数详解

jquery ajax 方法及各参数详解 1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分

Django1.7+JQuery+Ajax集成小例子

Ajax的出现让Web展现了更新的活力,基本所有的语言,都动态支持Ajax与起服务端进行通信,并在页面实现无刷新动态交互. 下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证用户注册时,用户名存在不存在的一个小应用.注意,验证存在不存在使用的是Ajax的方式,不用让用户点击按钮验证是否存在. 截图如下: 页面HTML代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta

JQuery ajax 在aspx中传值和取值

传值:ajax中的data(json)  js代码: <script type="text/javascript"> $(function () { $("#btnAddNews").bind("click", function () { var _name= $.trim($("#txtNewTitle").val()); $.ajax({ type: "POST", url: "A

jquery ajax跨域的完美解决方法(jsonp方式)

ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquer

jQuery Ajax 全解析

jQuery Ajax 全解析 本文地址: jQuery Ajax 全解析 本文作者:QLeelulu 转载请标明出处! jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [d

jQuery Ajax -附示例

jQuery其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能. jQuery 不是生产者,而是大自然搬运工. jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject 注:2.+版本不再支持IE9以下的浏览器 时机: 如果发送的是[普通数据] -> jQuery,XMLHttpRequest,iframe 如果发送的是[文件] -> iframe,jQuery(FormData对象),XMLH

jQuery - AJAX (来源于W3C)

jQuery - AJAX 简介 AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新. 什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示. 使用 AJAX 的应用程序案例:谷歌地图.腾讯微博.优酷视频.人人网等等. 关于 jQuery 与 AJAX jQuery 提供多个与 AJAX 有

jQuery.ajax(url,[settings])

概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax()可以不带任何参数直接使用. 注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置. 回调函数 如果要处理$.ajax()得到的数据,则需要使用回调函数.beforeSen

20150304+JQuery+AJax+插件-01

The Write Less,Do More--jQuery下 目录 The Write Less,Do More--jQuery下 1 一.each方法 2 二.jQuery中的ajax操作 3 1.ajax的底层实现 4 2.ajax的高级实现 7 1)模拟发送get请求 7 2)通过时间戳解决get请求缓存问题 8 3)模拟post请求 8 4)返回值类型 9 三.Ajax跨域请求--jsonp技术 11 1.Ajax跨域请求原理图 11 2.Ajax跨域请求不被允许的原因 11 3.js

jQuery AJAX 方法

jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: 方法 描述 $.ajax() 执行异步 AJAX 请求 $.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前,处理自定义 Ajax 选项或修改已存在选项 $.ajaxSetup() 为将来的 AJAX 请求设置默认值 $.ajaxTransport() 创建处理 Ajax 数据实际传送的对象