`
Algernoon
  • 浏览: 23641 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

AJAX的核心对象以及在级联中的简单应用实例

 
阅读更多

本篇文章主要是对学的AJAX做一个简单的总结和应用，实现一个城市选择的级联操作。

1，前台form表单实现城市的级联

 

<%@ 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>级联下拉案例</title>
<script type="text/javascript" src="/selectHTML.js"></script>
</head>
<body>
	省份:
	<select name="province" id="province" onchange="loadCitys(this);">
	</select> &emsp; 
	城市:
	<select name="city" id="city">
		<option value='-1'>---请选择---</option>
	</select>
</body>
</html>

 

 

2，实现级联的js代码（主要是通过AJAX技术实现前后台数据交互）

 

function createAjax(){
	// 解决浏览器兼容性问题
        var ajax;
	try {
		ajax = new XMLHttpRequest();
	} catch (e) {
		ajax = new ActiveXObject("Mircosoft.XMLHTTP");
	}
	return ajax;
}

// 1.在页面加载完毕后,通过AJAX方式,动态加载省份信息
window.onload=function(){
	
	var provinceSel = document.getElementById("province");
	provinceSel.innerHTML="<option value='-1'>---请选择---</option>";
	
	// 创建核心对象
	var ajax = createAjax();
	// 添加状态监听
	ajax.onreadystatechange=function(){
		if(ajax.readyState==4 && ajax.status==200){
			var resp = ajax.responseText;
			//console.debug(resp);
			provinceSel.innerHTML+=resp;
		}
	};
	// 创建http请求
	ajax.open("get","/province");
	// 发送请求
	ajax.send();
};

function onchange(){
	// this >> provinceSel
	//[window.]loadCitys(this);
}

// 2.在选择某个省份后,及时加载这个省份对应的城市信息
function loadCitys(privinceSel){
	// 获取选中的省份ID
	var pid = privinceSel.value;
	
	// 获取城市select
	var citySel = document.getElementById("city");
	citySel.innerHTML="<option value='-1'>---请选择---</option>";
	
	// 创建核心对象
	var ajax = createAjax();
	// 添加状态监听
	ajax.onreadystatechange=function(){
		if(ajax.readyState==4 && ajax.status==200){
			var resp = ajax.responseText;
			//console.debug(resp);
			citySel.innerHTML += resp;
		}
	};
	// 创建http请求
	ajax.open("get","/loadCityByProvince?provinceId="+pid);
	// 发送请求
	ajax.send();
	
}

   

 

3，Servlet后台获取省级信息代码

 

package ajax.web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

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 ajax.domain.Province;

@WebServlet("/province")
public class ProvinceServlet extends HttpServlet {

	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		
		// 设置编码
		req.setCharacterEncoding("UTF-8");
		
		// 加载后台省份信息
		List<Province> provinceList = Province.getAllProvince();
		
		// 准备响应配置
		resp.setContentType("text/html;charset=utf-8");
		PrintWriter writer = resp.getWriter();
		
		// 遍历每一个省份信息.返回<option value="1">四川</option>结构
		for (Province province : provinceList) {
			writer.write("<option value='"+province.getId()+"'>"+province.getName()+"</option>");
		}
		
	}
	
}

 使用json时要依赖的jar文件,在使用jquery的json时,没有引用该文件的时候容易报错。

 

4，Servlet获取市级城市信息

 

package ajax.web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

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 ajax.domain.City;
import ajax.domain.Province;

@WebServlet("/loadCityByProvince")
public class CityServlet extends HttpServlet {

	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		
		// 设置编码
		req.setCharacterEncoding("UTF-8");
		
		// 获取请求省份信息
		String provinceId  = req.getParameter("provinceId");
		
		// 根据省份信息,加载对应的城市信息
		List<City> citys = City.getCityByProvinceId(Long.parseLong(provinceId));
		
		// 准备响应配置
		resp.setContentType("text/html;charset=utf-8");
		PrintWriter writer = resp.getWriter();
		
		// 遍历每一个省份信息.返回<option value="1">成都</option>结构
		for (City city : citys) {
			writer.write("<option value='"+city.getId()+"'>"+city.getName()+"</option>");
		}
		
	}
	
}

 

 

 

 

5，Servlet获取市级城市信息（这儿返回的数据为JSON格式）

 

package ajax.web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

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 net.sf.json.JSONSerializer;

import ajax.domain.City;
import ajax.domain.Province;

@WebServlet("/loadCityByProvinceJSON")
public class CityJSONServlet extends HttpServlet {

	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		
		// 设置编码
		req.setCharacterEncoding("UTF-8");
		
		// 获取请求省份信息
		String provinceId  = req.getParameter("provinceId");
		
		// 根据省份信息,加载对应的城市信息
		List<City> citys = City.getCityByProvinceId(Long.parseLong(provinceId));
		
		// 准备响应配置
		resp.setContentType("text/html;charset=utf-8");
		PrintWriter writer = resp.getWriter();
		
		// 遍历每一个省份信息.返回<option value="1">成都</option>结构
		writer.write(JSONSerializer.toJSON(citys).toString());
	}
	
}

 

 

web.xml配置文件

 

<?xml version="1.0" encoding="ISO-8859-1"?>

<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0">

  <display-name>Welcome to Tomcat</display-name>
  <description>
     Welcome to Tomcat
  </description>

</web-app>

 

 

如果上述Servlet返回JSON数据，会依赖JSON相关jar包

ezmorph-1.0.6：使用json时要依赖的jar文件,在使用jquery的json时,没有引用该文件的时候容易报错。

json-lib-2.3-jdk15：JSON核心包

使用json-lib-2.2.3-jdk15.jar必要也要导入它的依赖包：

ezmorph-1.0.6.jar 
commons-lang 2.4 
commons-beanutils 1.7.0 
commons-collections 3.2 
commons-logging 1.1.1

分享到：
| HttpClient登陆
评论
发表评论

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

相关推荐

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...

    Ajax三级无刷新级联实例使用CallBackObject.js 简易Ajax框架

    这个“三级无刷新级联实例”是Ajax在Web开发中的典型应用，它允许用户在选择某个选项时，不需刷新页面即可动态获取并展示下级选项，通常用于如地区选择、类别筛选等场景。 在这个实例中，我们看到使用了名为`...

    用jquery开发的ajax各种实例包括（级联菜单，谷歌式搜索提示，可编辑表格页面无刷新切换等）

    在本文中，我们将深入探讨如何使用jQuery库进行AJAX（异步JavaScript和XML）开发，通过实际案例来学习包括级联菜单、谷歌式搜索提示和可编辑表格在内的常见功能。这些功能都允许用户在不刷新整个页面的情况下与网页...

    Ajax 实现级联菜单

    Ajax的核心是通过XMLHttpRequest对象进行异步通信，它可以在不刷新页面的情况下与服务器交换数据并更新部分网页内容。这样可以提供更好的用户体验，因为用户不需要等待整个页面重新加载。 2. **JavaScript基础**：...

    AJAX实例的级联菜单

    在AJAX级联菜单中，用户通常会选择一个主类别，然后基于这个选择，相关的子类别会即时地在下一个下拉框中加载，无需页面刷新。这种交互方式提供了流畅的用户体验，提高了网页的响应速度和效率。 在给定的文件中，...

    ajax实现城市级联

    总结，Ajax城市级联是Ajax技术在实际应用中的一个经典案例，它展示了如何利用Ajax进行异步数据交互，动态更新页面内容，从而提高用户界面的交互性和效率。理解和掌握这一技术，对于Web开发者来说至关重要。

    AJAX3级级联下拉例子

    AJAX的核心在于XMLHttpRequest对象，它是浏览器内置的一个对象，用于在后台与服务器进行通信。在JavaScript中，我们通过创建XMLHttpRequest实例，然后利用其方法来发送异步请求。当请求完成时，会触发回调函数，处理...

    Jquery 实例：Ajax级联下拉框效果

    这是一个利用了Ajax技术的一个Jquery实例，动态的生成级联的下拉列表框，在中关村zol中经常可以看到。如果遇到无法显示的情况，请自己阅读代码。

    ajax+ssh实现省份城市级联查询

    在此，我们将深入探讨Ajax、Spring、Hibernate和Struts2这四个关键技术以及它们在实现级联查询中的作用。 Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页...

    ajax+jQuery+ssh+oracle级联实例

    在IT行业中，构建高效、动态的Web应用是关键任务之一，而"ajax+jQuery+ssh+oracle级联实例"提供了一个具体的实现方案。这个实例涵盖了前端到后端的关键技术，包括异步数据交互（Ajax）、JavaScript库（jQuery）、...

    Ajax应用实例-在线用户计数实例、在线表格编辑实例、 无刷新形式的查询功能实例、实时校验实例、Web级联菜单实例

    下面我们将深入探讨标题和描述中提及的几个Ajax应用实例。 1. **在线用户计数实例**： 在线用户计数是实时展示当前网站活跃用户数量的一种功能。使用Ajax，我们可以定期向服务器发送请求，获取当前在线用户的数据...

    Ajax实现省市区三级级联Demo(数据库来自Mysql)

    这个“Ajax实现省市区三级级联Demo”是一个典型的前端与后端交互的实例，它展示了如何利用Ajax技术从MySQL数据库动态获取并显示省级、市级、区县级的数据，实现联动选择的效果。下面我们将详细探讨这一知识点。 ...

    城市级联完整实例(带数据库.sql文件) jquery+ajax

    在这个实例中，jQuery用于DOM操作，监听用户交互，并触发AJAX请求获取级联数据。 2. **AJAX**: AJAX (Asynchronous JavaScript and XML) 是一种在无需刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。...

    Ajax实现三级级联

    在Web开发中，"Ajax实现三级级联"是一种常见的交互技术，主要用于提升用户体验，使得用户在选择一项数据时，相关的下级数据能够自动更新而无需刷新整个页面。在这个场景中，例如省份、城市、区县的三级联动选择，...

    Ajax级联下拉

    Ajax级联下拉是一种常见的前端交互技术，常用于构建动态的、交互性强的网页应用，如地址选择器或分类过滤等。在这个项目中，我们主要关注的是如何利用Ajax实现中国省份与城市之间的级联下拉效果，同时结合MySQL...

    JSP+AJAX三级级联及更多级的实现

    在Web开发中，JSP（JavaServer Pages）和AJAX（Asynchronous JavaScript and XML）是两种常见的技术，它们常被组合使用以实现动态交互的网页。在这个“JSP+AJAX三级级联及更多级的实现”主题中，我们将深入探讨如何...

    jQuery实现级联地区选择

    总的来说，这个实例展示了如何结合使用jQuery、JSP、JavaScript和CSS来实现一个功能完善的级联地区选择器，这在网页开发中非常实用，尤其是在需要用户输入地区信息的场景下。理解并掌握这种实现方式对于提升Web开发...

    JSP Ajax省市县Select级联菜单.rar

    【JSP Ajax省市县Select级联菜单】是一个典型的前端与后端交互的示例，它在Web应用中常用于实现动态、无刷新的选择区域（省、市、县）功能。这个压缩包包含了一个完整的解决方案，使得用户在选择省份时，对应的市区...

    Ajax 级联显示

    - **创建XMLHttpRequest实例**：在JavaScript中，首先需要创建XMLHttpRequest对象实例。 - **监听状态变化**：通过`onreadystatechange`事件监听请求状态，当状态变为4（表示请求完成）且状态码为200（表示成功）...

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