JSON 在Ajax数据交换中的简单运用
随着浏览器内核更新,原先的json.js在最新的谷歌浏览下不管用了,运行报错,特此修改下代码,不使用json.js,使用Object自带的json转换方法,修改时间,2016年10月26日.
首先需要创建一个Servlet类,命名为JSONTest.java. 然后配置下web.xml文件,我的是自动生成的,也就没改动.web.xml的内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
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_2_5.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>JSONTest</servlet-name>
<servlet-class>servlet.ajax.JSONTest</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>JSONTest</servlet-name>
<url-pattern>/servlet/JSONTest</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
接下来,就是创建JS文件了,命名为yulei.js,其中的url是访问上面的servlet的路劲.js内容如下:
function Car(make,model,year,color){
this.make=make;
this.model=model;
this.year=year;
this.color=color;
}
function sendRequest(){
var car=new Car('Dodge','Cornet R\T',2009,'yellow');
// var pars="car="+car.toJSONString();
var pars="car="+Object.toJSON(car);
var url="servlet/JSONTest";
var mailAjax= new Ajax.Request(
url,
{
method:'get',
parameters:pars,
onComplete:jsonResponse,
onException: function(x, e) { alert(e) }
}
);
}
function jsonResponse(originalRequest){
alert(originalRequest.responseText);
var myObj=originalRequest.responseText.parseJSON();
alert(myObj.name);
}
然后,新建一个jsonTest.jsp文件,里面主要是加载一些js文件,和一个按钮,内容如下:
<%@ 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 'jsonTest.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" src="js/prototype.js"></script>
<!-- <script type="text/javascript" src="js/json.js"></script>
--> <script type="text/javascript" src="js/yulei.js"></script>
</head>
<body>
This is my JSP page. <br>
<input type="button" value="测试" onclick="sendRequest()"/>
</body>
</html>
最后,我们就编写Servlet类的内容:
package servlet.ajax; 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 org.json.JSONException;
import org.json.JSONObject; public class JSONTest extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter(); String s3=request.getParameter("car");
System.out.println(s3);
try {
JSONObject jsonObject=new JSONObject(s3);
System.out.println(jsonObject.getString("model"));
System.out.println(jsonObject.getString("year"));
} catch (JSONException e) {
e.printStackTrace();
} JSONObject resultJSON=new JSONObject();
try {
resultJSON.append("name", "violet");
resultJSON.append("occupation", "developer");
resultJSON.append("age", new Integer(22));
} catch (JSONException e) {
e.printStackTrace();
} out.print(resultJSON.toString());
}
}
这个Servlet的功能是:首先获取前台JS ajax请求传来的JSON数据,将其中的某些属性打印出来(你也可以Debug查看),然后重新新建一个JSON对象,并将其以字符串的形式传到前台,我们就可以获取到这个新建的JSON数据.
这就是简单的JSON在AJAX请求中数据传输的作用.
JSON 在Ajax数据交换中的简单运用的更多相关文章
- JQuery + JSON作为前后台数据交换格式实践
JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为 ...
- Ajax-06 Ajax数据交换格式
1.数据交换格式 服务端返回的数据,在本质上都是字符串,只是原生Ajax 或jQuery Ajax将这些字符串转换为容易理解的各种常用格式. a. Text 文本字符串 b. XML JavaScr ...
- 二维码与json都是数据交换格式
二维码与json都是数据交换格式: UI数据是人机数据交换格式.
- servlet与ajax数据交换(json格式)
JSON数据格式: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于的一个子集. JSON采用完全独 ...
- XML和JSON两种数据交换格式的比较
在web开发领域,主要的数据交换格式有XML和JSON,对于在 Ajax开发中,是选择XML还是JSON,一直存在着争议,个人还是比较倾向于JSON的.一般都输出Json不输出xml,原因就是因为 x ...
- Android之使用json进行网络数据交换
JSON作为一种轻量级的数据交换格式,凭借其易于阅读和编写.易于解析.传输速度快等优点流行了起来.最近正好在学习Android端从服务端端取数据,Json便派上了用场.好,下面开始切入主题. 1.准备 ...
- android之JSON 进行网络数据交换
什么是JSON JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于阅读和编写,同一时候也易于机器解析和生成,很适合于server与client的交互. J ...
- AJAX在VS2005中的简单应用 使用ajaxpro.2.dll[点击按钮执行事件不刷新]
原文发布时间为:2008-10-21 -- 来源于本人的百度文章 [由搬家工具导入] 1.下載ajaxpro.dll或AjaxPro.2.dll 放在Bin文件夹中2.配置web.config 3.u ...
- 【学习】006数据交换格式与SpringIOC底层实现
课程目标 XML和JSON Java反射机制 手写SpringIOC 什么是数据交换格式 客户端与服务器常用数据交换格式xml.json.html 数据交换格式用场景 移动端(安卓.IOS)通讯方式采 ...
随机推荐
- 【一天一道LeetCode】#257. Binary Tree Paths
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...
- Java基础---Java---网络编程---TCP的传输、客户端和服务端的互访、建立一个文本转换器、编写一个聊天程序
演示TCP的传输的客户端和服务端的互访 需求:客户端给服务端发送数据,服务端收到后,给客户端反馈信息. 客户端: 1.建立Socket服务,指定要连接方朵和端口 2.获取Socket流中的输出流,将数 ...
- dbms_lob使用之-基础
在Oracle中,存储在LOB中数据称为LOB的值,如使用Select 对某一LOB字段进行选择,则返回的不是LOB的值,而是该LOB字段的定位器(可以理解为指向LOB值的指针).如执行如下 ...
- eclipse代码恢复(开发程序代码恢复)
如果误操作,让本地代码丢失了不用怕,Eclipse local history可以恢复. 误删除文件后,直接ctrl+z可以恢复. 拉去代码覆盖了本地,也可以一个一个或者整体进行恢复:http://b ...
- redhat安装vsftpd
一个小问题 rpm -qa|ftp 但是出现3个ftp 只安装了一个 关于网卡ip 首先,我们看到 网卡上面有个x 说明网络是有问题的 我们双击,看到 我们先把connected和connect at ...
- ADFS3.0 Customizing the AD FS Sign-in Pages
Windows Server2012R2自带的adfs是3.0的版本,不同于以前的版本的是3.0中登陆页面的定制化全部是通过powershell指令实现,官方的介绍链接如下:http://techne ...
- java设计模式---合成模式3
实例 下面以一个逻辑树为例子,以上面的原理图为蓝本,看看如何实现并如何使用这个树,这个结构很简单,但是如何去使用树,遍历树.为我所用还是有一定难度的. 这里主要用到树的递归遍历,如何递归.如何控制 ...
- 【一天一道LeetCode】#87. Scramble String
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...
- ROS(indigo)_pr2_simulator仿真(gazebo)示例
ROS(indigo)_pr2_simulator仿真(gazebo)示例 1 开启pr2仿真 ~$ roslaunch gazebo_ros empty_world.launch ~$ roslau ...
- Strategy 设计模式 策略模式 超靠谱原代码讲解
先来假设一种情,我们需要向三种不同的客户做出不同的报价,一般来说要肿么设计呢,是不是马上会想到用IF,没有错,对于这种情况,策略模式是最好的选.大家可以这么理解,如果有情况需要用到大量的IF,那你用策 ...