Servlet配置

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"

         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"

         version="3.1">

    <servlet>

        <servlet-name>AjaxServer</servlet-name>

        <servlet-class>org.zln.ajax.servlet.AjaxServer</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>AjaxServer</servlet-name>

        <url-pattern>/AjaxServletDo.do</url-pattern>

    </servlet-mapping>

</web-app>

Servlet编写

package org.zln.ajax.servlet;

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.io.PrintWriter;

/**

 * Created by coolkid on 2015/6/7 0007.

 */

public class AjaxServer extends HttpServlet {

    @Override

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

        doGet(request,response);

    }

    @Override

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

        try{

            response.setContentType("text/html;charset=UTF-8");

            request.setCharacterEncoding("UTF-8");

            PrintWriter out = response.getWriter();

            //取参数信息

            String name = request.getParameter("name");

            //输入校验

            if(name == null || name.length() == 0){

                out.println("用户名不能为空");

            } else{

                //逻辑校验与业务处理

                if(name.equals("wangxingkui")){

                    out.println("用户名[" + name + "]已经存在，请使用其他用户名");

                } else{

                    out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册");

                }

            }

            /*这些发往HTML的数据会被ajax的回调函数处理*/

            out.println("<br/><a href=\"ajax.html\">返回校验页面</a>");

        } catch(Exception e){

            e.printStackTrace();

        }

        //返回更新数据（而不是跳转到新的视图）

    }

}

html页面

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>itcast.cn 用户名校验ajax实例</title>

    <script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/jquery-2.1.4.min.js"></script>

    <script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/ajax.js"></script>

</head>

<body>

    itcast.cn 用户名校验的ajax实例，请输入用户名：<br/>

    <!-- ajax方式下，不需要使用表单提交数据 -->

    <input type="text" id="userName" value=""/>

    <input type="button" value="校验" onclick="verify('userName')"/><br/>

    <!-- div空间用于显示ajax处理结果  -->

    <div id="result"></div>

</body>

</html>

js

/**

 * Created by coolkid on 2015/6/7 0007.

 */

/*用户名校验*/

function verify(id){

    //获取文本框内容

    var userNameObj = $("#"+id);

    var userNameValue = userNameObj.val();

    //发送数据给Servlet

    //使用jQuery的XMLHTTPRequest对象的get请求封装

    $.get("/Ajax/AjaxServletDo.do?name="+userNameValue,null,callBack);

}

//回调函数

function callBack(data){

    //接收服务端返回数据

    $("#result").html(data);

    //显示动态返回的数据

}

js的简化写法

/**

 * Created by coolkid on 2015/6/7 0007.

 */

/*用户名校验*/

function verify(id){

    //发送数据给Servlet

    //使用jQuery的XMLHTTPRequest对象的get请求封装

    $.get("/Lesson5_AJAX_Demo1/AjaxServletDo.do?name="+$("#"+id).val(),null,function(data){

        $("#result").html(data);

    });

}

AJAX基本演示使用的更多相关文章

  1. php应用jquery做ajax操作

    以下是全部代码: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <scr ...

  2. jQuery AJAX实例

    <html><head><title>jQuery Ajax 实例演示</title></head><script language= ...

  3. PHP Ajax简单实例

    最近学习Jquery Ajax部分,通过简单例子,比较了下post,get方法的不同 HTML部分 <html> <head> <title>jQuery Ajax ...

  4. 第18天 ajax技术和javascript加强（json）

    第18天    ajax技术和javascript加强(json) 复习: B/S架构实现文件上传的思路? 使用a标签实现文件下载功能,有什么问题? 使用Servlet实现文件下载的思路? 今日任务 ...

  5. Ajax 与文件上传

    一 Ajax篇 1 ajax简介(Asynchronous Javascript And XML) 异步,Js,XML,即使用Javascript语言与服务器进行异步交互,传输的数据为xml(可扩展标 ...

  6. 基于ThinkPHP3.23的简单ajax登陆案例

    本文将给小伙伴们做一个基于ThinkPHP3.2.的简单ajax登陆demo.闲话不多说.直接进入正文吧. 可能有些小伙伴认为TP自带的跳转页面挺好,但是站在网站安全的角度来说,我们不应该让会员看到任 ...

  7. 带你走进AJAX(1)

    ajax是什么? (1)ajax (asynchronouse javascript and xml) 异步的javascript 和xml (2)ajax是一个粘合剂,将javascript.xml ...

  8. 一个jquery-ajax post例子ajax 登陆

    index.html文件 <html> <head> <meta http-equiv="Content-Type" content="te ...

  9. 【python】-- Ajax

    Ajax AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案. 异步的JavaScript:使用 ...

随机推荐

  1. 【MYSQL笔记3】MYSQL过程式数据库对象之存储过程的调用、删除和修改

    mysql从5.0版本开始支持存储过程.存储函数.触发器和事件功能的实现. 我们以一本书中的例题为例:创建xscj数据库的存储过程,判断两个输入的参数哪个更大.并调用该存储过程. (1)调用 首先,创 ...

  2. HashMap JDK1.8实现原理

    HashMap概述 HashMap存储的是key-value的键值对,允许key为null,也允许value为null.HashMap内部为数组+链表的结构,会根据key的hashCode值来确定数组 ...

  3. centos编译安装rabbitmq

    安装环境 [root@VM_12_50_centos rabbitmq]# uname -a Linux VM_12_50_centos 3.10.0-514.21.1.el7.x86_64 #1 S ...

  4. Java学习笔记十:Java的数组以及操作数组

    Java的数组以及操作数组 一:什么是数组: 数组可以理解为是一个巨大的“盒子”,里面可以按顺序存放多个类型相同的数据,比如可以定义 int 型的数组 scores 存储 4 名学生的成绩 数组中的元 ...

  5. Python3爬虫（七） 解析库的使用之pyquery

    Infi-chu: http://www.cnblogs.com/Infi-chu/ pyquery专门针对CSS和jQuery的操作处理 1.初始化字符串初始化 from pyquery impor ...

  6. Create Fiori List App Report with ABAP CDS view – PART 2

    In the Part 1 blog, we have discussed below topics CDS annotations for Fiori List Report. How to cre ...

  7. python2.7练习小例子（十三）

        13):题目:将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5.     程序分析:对n进行分解质因数,应先找到一个最小的质数k,然后按下述步骤完成.(1)如果这个质数恰等于 ...

  8. shell eval命令使用

    eval命令将会首先扫描命令行进行所有的置换,然后再执行该命令. 该命令适用于那些一次扫描无法实现其功能的变量.该命令对变量进行两次扫描. 这些需要进行两次扫描的变量有时被称为复杂变量.不过这些变量本 ...

  9. Koa基本使用

    简介 koa 是由 Express 原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的 Web 框架. 使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的 ...

  10. 【算法】 string 转 int

    [算法] string 转 int 遇到的一道面试题, 当时只写了个思路, 现给出具体实现 ,算是一种比较笨的实现方式 public class StringToInt { /// <summa ...