`

Ajax实例

ajax 
阅读更多
1. ajax验证用户名

2. ajax二级联动 

GetAjaxInfoServlet.java

package com.andrew.web;

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;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class GetAjaxInfoServlet extends HttpServlet{

    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        String action=request.getParameter("action");
        if("checkUserName".equals(action)){
            this.checkUserName(request, response);
        }else if("ejld".equals(action)){
            this.ejld(request, response);
        }
        
    }

    
    private void checkUserName(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        PrintWriter out=response.getWriter();
        String userName=request.getParameter("userName");
        JSONObject resultJson=new JSONObject();
        if("jack".equals(userName)){
            resultJson.put("exist", true);
        }else{
            resultJson.put("exist", false);
        }
        out.println(resultJson);
        out.flush();
        out.close();
    }
    
    private void ejld(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        PrintWriter out=response.getWriter();
        String shengId=request.getParameter("shengId");
        JSONObject resultJson=new JSONObject();
        JSONArray jsonArray=new JSONArray();
        JSONObject temp=null;
        switch(Integer.parseInt(shengId)){
            case 1:{
                temp=new JSONObject();temp.put("id", 1);temp.put("text", "南京");jsonArray.add(temp);
                temp=new JSONObject();temp.put("id", 2);temp.put("text", "南通");jsonArray.add(temp);
                temp=new JSONObject();temp.put("id", 3);temp.put("text", "泰兴");jsonArray.add(temp);
                break;
            }
            case 2:{
                temp=new JSONObject();temp.put("id", 4);temp.put("text", "济南");jsonArray.add(temp);
                temp=new JSONObject();temp.put("id", 5);temp.put("text", "烟台");jsonArray.add(temp);
                temp=new JSONObject();temp.put("id", 6);temp.put("text", "蓬莱");jsonArray.add(temp);
                break;
            }
            case 3:{
                temp=new JSONObject();temp.put("id", 7);temp.put("text", "杭州");jsonArray.add(temp);
                temp=new JSONObject();temp.put("id", 8);temp.put("text", "宁波");jsonArray.add(temp);
                temp=new JSONObject();temp.put("id", 9);temp.put("text", "温州");jsonArray.add(temp);
                break;
            }
        }
        resultJson.put("rows", jsonArray);
        out.println(resultJson);
        out.flush();
        out.close();
    }
    
}

web.xml

<servlet>
      <servlet-name>getAjaxInfoServlet</servlet-name>
      <servlet-class>com.andrew.web.GetAjaxInfoServlet</servlet-class>
</servlet>
<servlet-mapping>
      <servlet-name>getAjaxInfoServlet</servlet-name>
      <url-pattern>/getAjaxInfo</url-pattern>
</servlet-mapping>

checkUserName.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function checkUserName(){
        var userName=document.getElementById("userName").value;
        var xmlHttp;
        if(window.XMLHttpRequest){
            xmlHttp=new XMLHttpRequest();
        }else{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
                alert(xmlHttp.responseText);
                var dataObj=eval("("+xmlHttp.responseText+")");
                if(dataObj.exist){
                    document.getElementById("tip").innerHTML="<img src='no.png'/>&nbsp;该用户名已经存在";
                }else{
                    document.getElementById("tip").innerHTML="<img src='ok.png'/>&nbsp;该用户名可用";
                }
            }
        };
        xmlHttp.open("get", "getAjaxInfo?action=checkUserName&userName="+userName, true);
        
        xmlHttp.send();
    }
</script>
</head>
<body>
<table>
    <tr>
        <th>用户注册</th>
    </tr>
    <tr>
        <td>用户名：</td>
        <td><input type="text" id="userName" name="userName" onblur="checkUserName()"/>&nbsp;&nbsp;<font id="tip"></font></td>
    </tr>
    <tr>
        <td>密码：</td>
        <td><input type="text" id="password" name="password"/></td>
    </tr>
    <tr>
        <td>确认密码：</td>
        <td><input type="text" id="password2" name="password2"/></td>
    </tr>
    <tr>
        <td><input type="submit" value="注册"/></td>
        <td><input type="button" value="重置"/></td>
    </tr>
</table>
</body>
</html>

ejld.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function checkUserName(){
        var userName=document.getElementById("userName").value;
        var xmlHttp;
        if(window.XMLHttpRequest){
            xmlHttp=new XMLHttpRequest();
        }else{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
                alert(xmlHttp.responseText);
                var dataObj=eval("("+xmlHttp.responseText+")");
                if(dataObj.exist){
                    document.getElementById("tip").innerHTML="<img src='no.png'/>&nbsp;该用户名已经存在";
                }else{
                    document.getElementById("tip").innerHTML="<img src='ok.png'/>&nbsp;该用户名可用";
                }
            }
        };
        xmlHttp.open("get", "getAjaxInfo?action=checkUserName&userName="+userName, true);
        
        xmlHttp.send();
    }
</script>
</head>
<body>
<table>
    <tr>
        <th>用户注册</th>
    </tr>
    <tr>
        <td>用户名：</td>
        <td><input type="text" id="userName" name="userName" onblur="checkUserName()"/>&nbsp;&nbsp;<font id="tip"></font></td>
    </tr>
    <tr>
        <td>密码：</td>
        <td><input type="text" id="password" name="password"/></td>
    </tr>
    <tr>
        <td>确认密码：</td>
        <td><input type="text" id="password2" name="password2"/></td>
    </tr>
    <tr>
        <td><input type="submit" value="注册"/></td>
        <td><input type="button" value="重置"/></td>
    </tr>
</table>
</body>
</html>

http://localhost:8080/HeadFirstAjaxJsonChap04/ejld.jsp
http://localhost:8080/HeadFirstAjaxJsonChap04/checkUserName.jsp
该用户名可用
分享到：
| Json简介
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax实例实例实例

    首先，我们看到一个名为`DraggableTBHeader`的项目，这可能是一个实现了拖动表格表头功能的Ajax实例。在Web开发中，允许用户自由拖动表格列头以重新排序或调整列宽，可以极大地提高交互性和可操作性。 1. **Web....

    asp+jquery ajax实例源码，添加，删除，修改，分页

    综上所述，这个"asp+jquery ajax实例源码"展示了如何利用ASP作为服务器端语言处理数据，结合jQuery的AJAX功能，实现无刷新的交互体验，优化用户在添加、删除、修改和分页操作中的浏览感受。通过学习和理解这个实例，...

    一个个人编写的简单的Ajax实例。eclipse开发

    在这个个人编写的Ajax实例中，开发者可能实现了一个简单的功能，比如通过Ajax获取数据并在页面上动态显示。由于没有提供具体的代码，我们无法深入讨论细节，但上述内容概述了Ajax的基本原理和开发过程。在实际项目中...

    简单ASP+AJAX实例

    "简单ASP+AJAX实例"是一个教学资源，旨在帮助新手了解如何结合ASP和AJAX来构建无刷新请求功能。在这样的实例中，通常会包含以下几个部分： 1. **ASP后端处理**：使用ASP接收来自客户端的AJAX请求，处理数据（例如...

    visual studio2008开发ajax实例(附带图文解说)

    **Visual Studio 2008 开发 AJAX 实例** Visual Studio 2008 是微软推出的强大集成开发环境（IDE），它支持多种编程语言，包括 C#、VB.NET 和 C++ 等。在 Web 开发领域，VS2008 提供了对 AJAX（Asynchronous ...

    AJAX实例大全(有演示)

    本资源《AJAX实例大全(有演示)》正是针对这一技术提供了一系列实例，帮助开发者更好地理解和运用AJAX。** ### 一、AJAX基础概念 1. **异步通信**：AJAX的核心是JavaScript的XMLHttpRequest对象，它允许浏览器在...

    ajax实例的简单实现

    总结起来，这个简单的AJAX实例展示了如何通过JavaScript与PHP交互，实现在不刷新页面的情况下获取并显示服务器端数据。通过这种方式，我们可以创建更加用户友好的交互式Web应用，提升用户体验。在实际项目中，可以...

    ajax实例教程

    **Ajax 实例教程** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新。这种技术可以让网页更加...

    Ajax实例 Ajax实例

    本Ajax实例将深入讲解如何实现这一功能。 ### 1. Ajax的基本原理 Ajax的工作流程主要包括以下步骤： 1. **创建XMLHttpRequest对象**：这是Ajax的基础，它负责与服务器进行通信。 2. **打开连接**：使用...

    ajax实例 ajax实例

    **Ajax 实例与 jQuery 实现** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况下，能够更新部分网页的技术。它通过JavaScript与服务器进行异步数据交换，提高了用户体验，使得用户界面更加...

    JS使用AjAX实例,JQUERY使用AJAX实例

    **JS使用AJAX实例** AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在JavaScript中，我们通常使用`XMLHttpRequest`对象或者jQuery库来实现AJAX请求。 1...

    thinkphp ajax实例

    下面我们将深入探讨ThinkPHP中如何实现Ajax实例及其相关知识点。 首先，了解Ajax的基本原理。Ajax的核心是XMLHttpRequest对象，它允许JavaScript在后台与服务器进行通信，而无需重新加载整个页面。通过创建...

    ajax demo ajax实例

    在"ajax demo ajax实例"这个项目中，我们可以学习到如何创建和实现基本的Ajax功能。Ajax的核心是JavaScript对象XMLHttpRequest，它是浏览器提供的内置对象，用于在后台与服务器进行通信。以下是一些关键知识点： 1....

    ajax 实例实例实例ajax 实例实例实例ajax 实例实例实例

    ### 三、Ajax实例 以下是一个简单的Ajax GET请求示例： ```javascript function getData(url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr....

    ssh+ajax实例

    在"ssh+ajax实例"中，可能涉及以下知识点： 1. **Spring MVC的配置**：如何设置Spring的DispatcherServlet，定义处理器映射器和视图解析器，以及配置服务bean。 2. **Struts1的配置**：编写struts-config.xml文件...

    springMVC ajax实例

    在这个"springMVC ajax实例"中，我们将深入探讨这两者如何协同工作以提高用户体验。 首先，让我们从SpringMVC开始。SpringMVC是一个基于模型-视图-控制器（MVC）架构模式的轻量级Web框架。它的主要功能包括请求分发...

    ajax实例,经常用到的ajax实例

    **Ajax 实例详解** ...这个Ajax实例涵盖了基本的Ajax应用流程，通过学习和实践，你可以更好地理解Ajax的工作原理以及在实际项目中的应用。对于前端开发者来说，掌握Ajax技术是提高网页交互性的关键技能。

    ajax实例源码

    **Ajax（Asynchronous JavaScript and ...通过这个"ajax实例源码"，初学者可以深入学习Ajax的基本用法和实际应用，从创建XMLHttpRequest对象到发送请求，再到处理响应和更新页面，逐步掌握Ajax技术，提升Web开发技能。

    AJAX实例入门讲解

    这个简单的AJAX实例展示了如何利用JavaScript和Servlet实现动态交互。AJAX技术的运用不仅限于此，它还可以用于实时聊天、动态加载内容、表单验证等多种场景，大大增强了Web应用程序的交互性和性能。 在实际开发中，...

    AJAX实例应用,有20多个实例

    4. **AJAX实例应用场景：** - **表单验证**：在提交前验证用户输入，无需跳转即可反馈错误信息。 - **分页加载**：动态加载更多内容，减少页面加载时间。 - **实时数据更新**：如股票报价、天气预报等实时信息，...

Magicbox
Global site tag (gtag.js) - Google Analytics