首页 > 代码库 > 实现ajax

实现ajax

//jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="http://www.mamicode.com/">
    
    <title>My JSP ‘T9_1.jsp‘ starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">
    -->

    <script type="text/javascript" src="http://www.mamicode.com/jquery/jquery-1.8.0.js"></script>
    
    <script type="text/javascript">
        //实现ajax
        function isCheckRegister(id,judge){
            //传多个参数,message:$(id).val(),judge:judge,key-value对,其实转换为url?message=id的value值?judge=judge的值
            //post提交:第一个参数url,第二个参数:要提交的参水,第三个参数回调函数,第四个参数:返回是的文本形式
            //post提交:除了一个参数不可以省略,其余的都是可选的
            $.post("T9_1Servlet",{message:$(id).val(),judge:judge},function(date)
            {
                if(judge){
                    //获取id为msgEmail,注意的:id必须前面加上#,name加上.其实就跟样式一样,例如<div id="#aaa" name=".aaa"></div>
                    //.html是innerHTML的缩写
                    $("#msgEmail").html(date);
                    //这句代码是为文本框Id为email的value值赋值
                    //$("#email").val(date);
                }else{
                    $("#msgUserName").html(date);
                }
            });
        }
        
        //得到焦点时,清空数据
        function facousEmail(){
            $("#msgEmail").html("");
        }
        
        function facousUserName(){
            $("#msgUserName").html("");
        }
    </script>
  </head>
 
  <body>
        * Email:<input  type="text" id="email" onfocus="facousEmail()"  onblur="isCheckRegister(this, true)" />
        <span id="msgEmail"></span> <br />
       * 用户名:<input  type="text"  id="userName" onfocus="facousUserName()"  onblur="isCheckRegister(this, false)"/>
       <span id="msgUserName"></span><br />

  </body>
</html>

 

//servlet

package controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class T9_1Servlet extends HttpServlet {

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

        doPost(request, response);
    }

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

        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        PrintWriter out=response.getWriter();
        System.out.println(request.getRequestURL());
        boolean judge= Boolean.parseBoolean( request.getParameter("judge"));
        String id=request.getParameter("message");
        if(judge){
            if(id.trim().equals("mysec@163.com")){
                out.println("该Email已使用过");
            }else {
                out.println("可以注册");
            }
        }else {
            if(id.trim().equals("mysec")){
                out.println("用户名已使用");
            }else {
                out.println("用户名可以注册");
            }
        }
        out.flush();
        out.close();
    }

}