<%@ 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 = "jsonObject";
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 属性，取出服务器端返回的数据
alert(json);
var obj = eval('(' + json+ ')');//通过eval函数把jsonObject对象转换js中的对象
alert("obj"+obj);
alert(obj.name);
alert(obj.age);
alert(obj.sex);
}
}
}
</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>
后台json代码：
package com.wepull.servlet;
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 JsonObjectServlet 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();
JSONObject jsonObj = new JSONObject();
jsonObj.put("name", "小希子");
jsonObj.put("age", new Integer(21));
jsonObj.put("sex", "男");
System.out.println(jsonObj);
pw.println(jsonObj);
}
}
分享到：
相关推荐
总的来说，Ajax结合JSON提供了一种高效且易于处理的客户端与服务器之间的数据交互方式。通过`json.js`和`json.jar`这样的工具，我们可以方便地在JavaScript和Java环境中进行JSON的序列化和反序列化操作，从而实现...
4. AJAX请求与JSON数据的交互，尽管没有直接提及，但这是常见的应用场景。 5. 通过实例学习和理解JSON在Web开发中的实际应用。 通过深入研究这个主题，开发者能够提高处理数据交换和动态页面构建的能力，这对于现代...
总结来说，JQuery AJAX 提供了与服务器异步交互的能力，而 JSON 则是高效的数据交换格式。两者结合使用，可以实现高效的前后端数据通信，提升用户体验，减少不必要的页面刷新。在实际项目中，了解并熟练掌握这两项...
在Web服务和前后端交互中，JSON常用于传输数据，因为它结构清晰且支持复杂的数据类型。本话题主要探讨如何将JSON数据提交到后台，并在Action后台进行解析，同时涉及两个库：json2和json-lib。 1. **JSON数据提交**...
通过在后台与服务器进行少量数据交换，AJAX可以实现页面的部分刷新，提高了用户体验。AJAX的核心技术包括XMLHttpRequest对象、JavaScript以及DOM（Document Object Model）。 JSON与AJAX在Web开发中的结合是常见的...
JSON（JavaScript Object Notation）是轻量级的数据交换格式，因其易于人阅读和编写，同时也易于机器解析和生成，成为Ajax通信中常用的数据传输格式。在Java环境中，为了实现Ajax与JSON的功能，需要引入特定的jar...
Java 后台生成 JSON 数据是现代 Web 应用开发中的常见任务，特别是在与前端框架如 EXT 进行数据交互时。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，因其易于人阅读和编写，同时也易于机器解析...
在Servlet中，我们可以使用`JSONObject`或`JSONArray`等库将Java对象转换为Json字符串，然后通过Ajax发送到客户端，客户端再将接收到的Json数据解析成JavaScript对象，进而更新页面。 具体来说，当用户触发一个事件...
7. **与前端的交互**：获取到的JSON数据通常通过HTTP响应返回给前端，前端可以使用JavaScript的JSON.parse()方法解析JSON字符串为JavaScript对象。为了提升用户体验，可以考虑使用异步请求（如Ajax）来获取数据，...
在这个"AjaxJson应用小例子"中，我们将深入探讨如何在Java环境下，结合Struts1.3框架，使用Ajax和JSON进行数据交互。 首先，我们需要了解Struts1.3框架。Struts是Apache组织开发的一个MVC（Model-View-Controller）...
在Java中，Ajax和JSON结合使用，可以实现高效、简洁的前后端数据交互。 本实例以"JSON2.0"库为基础，结合Servlet技术，展示了如何在Java环境中构建一个Ajax应用。JSON2.0是Douglas Crockford提供的一个纯JavaScript...
总结来说，"使用json字符highcharts绑定数据"就是利用JavaScript的JSON.parse()方法解析JSON字符串，通过Ajax获取数据，然后将数据绑定到Highcharts图表中，实现动态的数据展示。同时，也可以根据需要动态添加或更新...
"将后台数据转换为jion数据.zip_SNDT_app后台_fourthatu_把后台数据转换为json数据"这个主题涵盖了从后端数据获取、处理、转换成JSON，再到前端应用的消费等多个步骤，涉及到后端开发、数据格式化和前端交互等多个...
Java中的JSON转换是Web开发中...以上就是关于Java后台JSON转换的基础知识，包括使用`org.json`库进行JSON操作，以及与JavaScript前端通过Ajax进行数据交互。理解并熟练掌握这些技术对于进行前后端数据通信至关重要。
JSON格式被广泛应用于Web服务和客户端之间的数据交互，因为其结构清晰，可以方便地转换为JavaScript对象，非常适合于AJAX（Asynchronous JavaScript and XML）技术。 在AJAX中，JSON起到了关键的角色。AJAX允许网页...
总结起来，`aspJSON`类库是ASP环境下处理JSON数据的一种实用工具，它简化了JSON与数据库之间的交互，提高了Web应用程序的灵活性和可扩展性。通过学习和使用`jsonObject.class.asp`，开发者可以更高效地构建动态、...
- 在Java Web应用中，使用AJAX可以实现异步数据请求，通常与服务器进行JSON数据交换。通过XMLHttpRequest对象或现代浏览器的fetch API发送请求，服务器响应JSON格式的数据，客户端接收到数据后，利用JSON库解析成...
在Web开发中，JSON常用于服务器与客户端之间的数据交互，特别是在AJAX（Asynchronous JavaScript and XML）技术中扮演着核心角色。 AJAX是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与...