`

Ajax 使用JSON向服务器发送数据

    博客分类:
  • AJAX
阅读更多

文件一览

  • JSONExample.java
  • jsonExample.html

JSONExample.java

package ajaxbook.chap3;

import java.io.BufferedReader;
import java.io.IOException;

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

import org.json.JSONException;
import org.json.JSONObject;

public class JSONExample extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String json = readJSONStringFromRequestBody(req);
		JSONObject jsonObject = null;
		try {
			jsonObject = new JSONObject(json);
			String responseText = "You have a " + jsonObject.getInt("year") + " "
			+ jsonObject.getString("make") + " " + jsonObject.getString("model")+ " "
			+ "that is " + jsonObject.getString("color") + " in color";
			resp.setContentType("text/xml");
			resp.getWriter().print(responseText);
		} catch(JSONException pe) {
			System.out.println("JSONException: " + pe.toString());
		}

	}
	
	private String readJSONStringFromRequestBody(HttpServletRequest request) {
		StringBuffer json = new StringBuffer();
		String line = null;
		try {
			BufferedReader reader = request.getReader();
			while ((line = reader.readLine()) != null) {
				json.append(line);
			}
		} catch (Exception e) {
			System.out.println("Error reading JSON string: " + e.toString());
		}
		return json.toString();
	}
}

 

 

jsonExample.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<script language="JavaScript" src="./js/json2.js" type="text/javascript"></script>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	} else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}
function doJSON() {
	var car = getCarObject();
	
	var carAsJSON = JSON.stringify(car); 
	alert("Car Object as JSON:\n "+carAsJSON);
	
	createXMLHttpRequest();
	
	var url = "JSONExample?timeStamp="+new Date().getTime();
	xmlHttp.open("POST",url,true);
	xmlHttp.onreadystatechange=handleStateChange;
	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
	xmlHttp.send(carAsJSON);
}
function getCarObject() {
	return new Car("Dodge","Coronet R/T", 1968, "yellow");
}
function Car(make,model,year,color) {
	this.make = make;
	this.model = model;
	this.year = year;
	this.color = color;
}
function handleStateChange() {
	if (xmlHttp.readystate == 4) {
		if (xmlHttp.status == 200) {
			parseResults();
		}
	}
}
function parseResults() {
	var responseDiv = document.getElementById("serverResponse");
	if (responseDiv.hasChildNodes()) {
		responseDiv.removeChild(responseDiv.childNodes[0]);
	}
	var responseText = document.createTextNode(xmlHttp.responseText);
	responseDiv.appendChild(responseText);
}

</script>
<head>
</head>
<body>
	<h1>Select the types of pets in your home:</h1>
	<br />
	<br />
	<form action="#">
		<input type="button" value="Click here to send JSON data to the server" onclick="doJSON()" />
	</form>
	<h2>Server Response:</h2>
	<div id="serverResponse"></div>
</body>
</html>

 其中java里要导入org.json.jar包,JavaScript要引入json2.js文件,这两个文件都在下面的附件里。

 

0
1
分享到:
评论

相关推荐

    Ajax使用JSON向服务器发送数据.doc

    "Ajax 使用 JSON 向服务器发送数据" Ajax 使用 JSON 向服务器发送数据是将数据从客户端传输到服务器端的一种方式,使用 JSON 作为数据交换格式可以提高数据传输效率和简化数据处理过程。 在了解 Ajax 使用 JSON 向...

    7、使用JSON向服务器发送数据——ajax基础笔记

    在Web开发中,向服务器发送数据是不可或缺的一部分,特别是在动态交互的应用中。JSON(JavaScript Object Notation)作为一种轻量级的数据交换格式,由于其简洁、易读和易于解析的特性,已经成为现代网络通信中广泛...

    Ajax中使用JSON传输数据

    当与服务器进行交互时,可以使用`send()`方法发送JSON数据。例如,将上面的JSON对象作为POST请求的数据发送: ```javascript var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://example.com/api/user'); ...

    ajax+json实例

    客户端可能有一个HTML页面,通过JavaScript调用AJAX发送请求,服务器端使用.NET处理请求,将数据以JSON格式返回。例如,一个简单的获取用户信息的接口: ```javascript // 客户端AJAX请求 function getUserInfo() {...

    ajax操作json数据

    在这个过程中,"Ajax_JSON"可能是包含这个示例代码的文件夹或者文件,用于演示如何使用AJAX与服务器交互,接收并处理JSON数据。 总结起来,"ajax操作json数据"的主题涉及到利用AJAX进行异步通信,结合JSON作为数据...

    ajax 解析json数据

    总结,AJAX解析JSON数据主要涉及`XMLHttpRequest`或`fetch` API的使用,通过设置响应类型和响应处理函数,我们可以方便地获取和操作JSON数据。对于新手来说,理解这些基本概念和操作是学习Web开发的重要一步。在实际...

    .NET利用jqury+ajax+json方式实现的数据分页

    - 使用jQuery的Ajax方法(如`$.ajax`或`$.getJSON`)向服务器发送请求,获取分页数据。在请求成功后,解析返回的JSON数据,并使用jQuery操作DOM,将数据插入到页面的适当位置。 7. **配置分页插件**: - 调用`...

    AJAX_JSON每秒刷新数据

    AJAX (Asynchronous JavaScript and XML) 和 JSON (JavaScript Object Notation) 是Web开发中的核心技术,它们结合使用可以实现页面无刷新地实时更新数据,提供更好的用户体验。本篇将深入讲解如何利用AJAX和JSON每...

    AjaxJson 实例 AjaxJson

    AjaxJson 是一种在 Web 应用程序中实现异步数据交换的技术,它结合了 AJAX(Asynchronous JavaScript and XML)和 JSON(JavaScript Object Notation)的优势,使得网页可以在不刷新整个页面的情况下与服务器进行...

    Ajax+JSON 提交数据的演示

    - **数据发送**:使用XMLHttpRequest对象或者更现代的fetch API,可以异步发送JSON数据到服务器。 ```javascript let xhr = new XMLHttpRequest(); xhr.open('POST', '/api/login'); xhr.setRequestHeader('Content...

    使用Ajax向PHP服务端发送请求并返回JSON数据

    接下来,我们通过`open`方法打开到服务器的连接,`POST`表示我们要发送数据,`'server.php'`是服务器端处理请求的脚本地址,`true`表示请求是异步的。接着,我们设置了请求头`Content-Type`为`application/json`,...

    php-curl+ajax+json数据传输2.0版本

    在AJAX请求中,通常会将服务器返回的数据格式化为JSON,然后JavaScript可以方便地解析这些数据并更新页面。 在这个2.0版本中,可能的改进包括优化了数据传输效率,增强了安全性,或者提供了更灵活的接口。文件名`...

    Ajax+JSON 搜索框自动完成提示功能

    3. **Ajax请求**:使用`$.ajax()`或`$.getJSON()`(jQuery方法)构建一个Ajax请求,URL指向服务器端处理搜索建议的接口,数据类型设置为`'json'`,以接收JSON响应。 4. **服务器端处理**:在服务器端(可能是Java、...

    一头扎进Ajax&Json视频教程第一讲

    7. 实战示例:通过实际代码示例,演示如何使用Ajax发送请求,并将Json数据动态渲染到网页上。 源码文件"一头扎进Ajax&Json视频教程源码.rar"可能包含了与视频教程配合的示例代码,你可以通过学习这些代码加深对Ajax...

    文件上传和ajax获取json的小示例

    4. 服务器返回JSON数据到前端,AJAX回调函数处理响应,通常会将数据解析成JavaScript对象。 5. 最后,前端更新DOM(Document Object Model)以显示新获取的数据,实现页面的实时刷新。 在"uploaddemo"这个压缩包中...

    什么是Ajax和json???

    尽管名称中包含了“XML”,但实际上Ajax不仅仅局限于使用XML作为数据格式,也可以使用其他格式如JSON。 **组成Ajax的关键技术包括:** - **XHTML/CSS**: 提供网页的基本结构和样式。 - **DOM (Document Object ...

    ajax返回json对象.zip

    总结来说,"Ajax返回JSON对象"涉及到的技术点包括Ajax的基本使用、JSON数据格式、Ajax发送和接收JSON数据的流程、jQuery对Ajax的支持、跨域请求以及安全性和错误处理。这些都是Web开发中不可或缺的知识点,理解和...

Global site tag (gtag.js) - Google Analytics