<%@ page language="java" import="java.util.*" pageEncoding="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="<%=basePath%>">
<title>My JSP 'index.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="styles.css">
-->
<script type="text/javascript">
var xmlHttpReq;
//创建一个XmlHttpRequest对象
function createXmlHttpRequest() {
if (window.XMLHttpRequest) {
xmlHttpReq = new XMLHttpRequest();//非IE浏览器
} else if (window.ActiveXObject) {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器
}
}
function check(name){
if(name!=""){
alert(name);
//1.创建一个XmlHttpRequest对象
createXmlHttpRequest();
//2.调用XMLHTTPRequest对象的 open方法()，
//初始化XMLHttpRequest组件
//处理缓存问题 url后面再加个时间参数，保证每次请求的url都不同
var url = "json";
var query = "name="+name;
xmlHttpReq.open("POST",url,true);
// "Get"是请求方式，
//url向后台服务器发送请求的url
//true 代表使用异步请求， 可选参数，默认为true
//3.注册回调函数
xmlHttpReq.onreadystatechange=callBack;
//callBack 为自定义的回调函数的名字 注意：后面没有括号
//当xmlHttpReq对象的readystate状态改变时自动触发 回调函数callBack
//4.把请求发送到服务器
xmlHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttpReq.send(query); //post请求
}else{
alert("请输入数据");
}
}
function callBack(){
//alert("readyState:"+xmlHttpReq.readyState);
if(xmlHttpReq.readyState==4){//ajax引擎初始化成功
if(xmlHttpReq.status==200){//与tomcat（服务器）交互成功,http协议成功
alert("xmlHttpReq.status:"+xmlHttpReq.status);
var json = xmlHttpReq.responseText;
//通过responseText 属性，取出服务器端返回的数据
var citys = eval(json);//通过eval函数把jsonArray对象转换为数值
alert("citys"+citys);
for(var i=0; i<citys.length; i++){
alert(citys[i]);
}
}
}
}
</script>
</head>
<body>
<p align="center">
省市二级联动
</p>
<table align="center">
<tr>
<td>
省份
</td>
<td>
<input type="text" onblur="check(this.value)">
</td>
<td>
<span id="sp1"></span>
</td>
</tr>
</table>
</body>
</html>
后台代码:
package com.wepull.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class JsonServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
System.out.println("ajax传来的name："+name);
PrintWriter pw = response.getWriter();
JSONArray array = new JSONArray();
if("湖北".equals(name)){
array.add("武汉");
array.add("宜昌");
array.add("黄石");
}else if("浙江".equals(name)){
array.add("杭州");
array.add("温州");
array.add("台州");
}else if("广东".equals(name)){
array.add("广州");
array.add("深圳");
array.add("东莞");
}
System.out.println(array);
System.out.println("array.toString()"+array.toString());
pw.println(array);
}
}
分享到：
相关推荐
总的来说，Ajax结合JSON提供了一种高效且易于处理的客户端与服务器之间的数据交互方式。通过`json.js`和`json.jar`这样的工具，我们可以方便地在JavaScript和Java环境中进行JSON的序列化和反序列化操作，从而实现...
Java 后台生成 JSON 数据是现代 Web 应用开发中的常见任务，特别是在与前端框架如 EXT 进行数据交互时。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，因其易于人阅读和编写，同时也易于机器解析...
在本文中，我们将探讨如何使用SSH1框架与jQuery的AJAX功能来处理JSON二维数组，特别是在实现菜单联动下拉框的场景中。SSH1（Spring、Struts、Hibernate）是Java开发中的一个流行MVC框架组合，而jQuery的AJAX功能则...
总结来说，JQuery AJAX 提供了与服务器异步交互的能力，而 JSON 则是高效的数据交换格式。两者结合使用，可以实现高效的前后端数据通信，提升用户体验，减少不必要的页面刷新。在实际项目中，了解并熟练掌握这两项...
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，被广泛用于Web应用程序之间的数据传输，尤其是AJAX（Asynchronous JavaScript and XML）技术。JSON-Lib是Java平台上的一个库，它提供了处理JSON数据...
这个jar包是JSON-Lib的核心组件，包含了处理JSON数据所需的所有类和方法，对于使用Java进行Web开发，尤其是涉及到AJAX（Asynchronous JavaScript and XML）技术的开发者来说，它是必不可少的工具。 在使用json-lib-...
JSON（JavaScript Object Notation）是轻量级的数据交换格式，因其易于人阅读和编写，同时也易于机器解析和生成，成为Ajax通信中常用的数据传输格式。在Java环境中，为了实现Ajax与JSON的功能，需要引入特定的jar...
在Servlet中，我们可以使用`JSONObject`或`JSONArray`等库将Java对象转换为Json字符串，然后通过Ajax发送到客户端，客户端再将接收到的Json数据解析成JavaScript对象，进而更新页面。 具体来说，当用户触发一个事件...
- 在Java Web应用中，使用AJAX可以实现异步数据请求，通常与服务器进行JSON数据交换。通过XMLHttpRequest对象或现代浏览器的fetch API发送请求，服务器响应JSON格式的数据，客户端接收到数据后，利用JSON库解析成...
通过在后台与服务器进行少量数据交换，AJAX可以实现页面的部分刷新，提高了用户体验。AJAX的核心技术包括XMLHttpRequest对象、JavaScript以及DOM（Document Object Model）。 JSON与AJAX在Web开发中的结合是常见的...
结合 AJAX 技术，可以在不刷新整个页面的情况下，实现后台数据的异步加载。 2. **详述** - **依赖的库文件** - JSON 功能通常依赖于 JSON 库，如 json.org 提供的 `json.jar`，用于 Java 端的数据转换。 - ...
在JSP中，使用jQuery和AJAX进行前后台交互是一种常见的技术手段，特别是在处理动态数据和页面局部更新时。在本示例中，主要讲解如何通过AJAX将JSON格式的参数传递给服务器，并接收服务器返回的JSON数据。 首先，...
LigerUI是一款强大的JavaScript ...总的来说，LigerUI的Grid组件结合Java的JSON数据处理，能高效地展示和管理后台数据，提供用户友好的交互体验。在项目中灵活运用这些技术，能够极大地提升前端应用的性能和用户体验。
"将后台数据转换为jion数据.zip_SNDT_app后台_fourthatu_把后台数据转换为json数据"这个主题涵盖了从后端数据获取、处理、转换成JSON，再到前端应用的消费等多个步骤，涉及到后端开发、数据格式化和前端交互等多个...
4. **与JS、JSP交互**：由于JSON格式与JavaScript语法紧密相关，`morph-1.1.1.jar`很可能支持与JavaScript的无缝交互，使得在JSP（JavaServer Pages）中使用JSON数据变得简单。在JSP中，你可以直接将JSON对象嵌入到...
7. **前端交互**：在前端，通常使用JavaScript的`fetch` API或者jQuery的`$.ajax`方法发送JSON数据到服务器，并通过回调函数接收并处理服务器返回的JSON数据。例如，使用`fetch`： ```javascript fetch('/servlet-...
在Web开发中，Ajax（Asynchronous JavaScript and XML）和JSON（JavaScript Object Notation）是两种常用的技术，用于实现页面的异步数据交互和数据传输。Java作为后端服务器语言，常与它们配合处理数据，尤其是当...