servlet与ajax数据交换（json格式）
JSON数据格式：
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。
JSON建构于两种结构：
（1）“名称/值”对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组 （associative array）。
（2）值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。
JSON具体的表现形式：
（1）对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
例：{“name”：“zhangsan”} //单属性 或者多个属性 {“name”：“lisi”，“sex”：“男” } // 具体对象
（2）数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。
例： ["value1","value2","value3"] //数组形式 [{“name”：“zhangsan1”},{“name”：“zhangsan2”},{“name”：“zhangsan3”}] //对象数组
Servlet与前端ajax的数据交互:
主要流程为 前端获取数据通过ajax的异步传输传至servlet，servlet处理数据后，通过response回传至前端页面。
注意： 一般在传输过程中会遇到两个比较常见的问题，第一就是传回前端时乱码问题，这个问题可以通过 在servlet处理方法中加入：response.setCharacterEncoding("UTF-8"）解决；第二就是传至前端后，不会触发ajax中的回调函数，原因是因为servlet传回的json数据格式不合法而没有触发ajax的success状态。
关于servlet返回的json数据处理方法：
（1）自己拼接json字符串（出错率较高），使其数据满足json格式
JSON对于servlet处理格式要求，键必须加双引号，值分为字符串和数字，数字可不加引号，字符串必须加引号
例： {“"name"："zhansan", "age"：13, "sex"："男" } // 这种为标准格式，字符串类型加引号，纯数字可不加
将一个独立对象转为以上的格式的字符串形式，才可以通过response.getWrite.append()传至前端 ajax 中，成功处罚回调函数
String result = "{"+"/"name/""+":"+"/""+name+"/""+","+"/"age/""+":"+"/""+age+"/""+","+"/"sex/""+":"+"/""+sex+"/""+"}";
（2）调用第三方封装好的 json 数据转换方法（个人使用的是Gson，链接地址：https://pan.baidu.com/s/1Yu91BYlqoJSXpzk37ZXZ6g）
建议使用这种方法，高效，简洁，适用于各种数据集合（list，map等）。详细使用可看下列实例（具体代码1）。
具体实例代码1（采用第一种字符串拼接方式）
前端html部分（含ajax）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="box">
<table>
<tr>
<td>姓名</td>
<td><input name="username" type="text"></td>
</tr>
<tr>
<td>性别</td>
<td><input name="sex" type="text"></td>
</tr>
<tr>
<td>年龄</td>
<td><input name="age" type="text"></td>
</tr>
<tr>
<td>手机号</td>
<td><input name="phone" type="text"></td>
</tr>
<tr><td><button>提交</button></td></tr>
</table>
</div>
<div>
<table>
信息返回
<tr>
<td>姓名</td>
<td id="name"></td>
</tr>
<tr>
<td>性别</td>
<td id="sex"></td>
</tr>
<tr>
<td>年龄</td>
<td id="age"></td>
</tr>
<tr>
<td>手机号</td>
<td id="phone"></td>
</tr>
</table>
</div>
<script>
$(function(){
$("button").click(function(){
$.post("AjaxTest",
{'username':$("input[name=username]").val(),
'sex':$("input[name=sex]").val(),
'age':$("input[name=age]").val(),
'phone':$("input[name=phone]").val()},
function(data,textStatus){
console.log(textStatus);
console.log(data.username);
$("#name").html(data.username);
$("#sex").html(data.sex);
$("#age").html(data.age);
$("#phone").html(data.phone);
},"json");
}); })
</script>
</body>
</html>
后端servlet部分（字符串拼接）
servlet部分
@WebServlet("/AjaxTest")
public class AjaxTest extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public AjaxTest() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String name = request.getParameter("username");
String sex = request.getParameter("sex");
String age = request.getParameter("age");
String phone = request.getParameter("phone");
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json"); User one = new User(name,sex,age,phone);
String result = one.toString();
System.out.println(result);
response.getWriter().append(result);
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} User类 public class User {
private String username;
private String sex;
private String age;
private String phone;
public User(String username, String sex, String age, String phone) { this.username = username;
this.sex = sex;
this.age = age;
this.phone = phone;
} public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getAge() {
return age;
}
public void setAge(String age) {
this.age = age;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
} @Override
public String toString() {
return "{" + "\"username\"" + ':' + "\""+ username +"\"" + ","+ "\"sex\""+':' +"\"" +sex +"\""+','+ "\"age\""+':' + "\"" + age + "\"" +','+"\"phone\""+':' + "\""+phone+"\"" + "}";
}
}
具体实例代码2（采用gson转换json方式处理）
前端代码（含ajax）
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input type="text" name="cc" / >
<input type="submit" />
<div>
姓名：<span id="name"></span> <br/>
性别：<span id="sex"></span><br/>
年龄： <span id="age"></span>
</div>
</form>
<script type="text/javascript">
$(function(){
$("input[type=submit]").click(function(){
$.post("ajax",
{"cc":$("input[name=cc]").val()},
function(data,textStatus){
console.log(data.name);
$("#name").html(data.name);
$("#sex").html(data.sex);
$("#age").html(data.age);
},
"json"
);
}); })
</script>
</body>
</html>
servlet部分（调用gson方法）
servlet部分
@WebServlet("/ajax")
public class ajax extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public ajax() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8");
String c = request.getParameter("cc");
System.out.println(c);
User one = new User(c, "男", 13);
Gson gson = new Gson();
String result = gson.toJson(one);
response.getWriter().append(result); }
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} } User类部分 public class User {
private String name;
private String sex;
private int age;
public User(String name, String sex, int age) {
this.name = name;
this.sex = sex;
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
} }
具体实例代码3（多组数据传至ajax）
前端代码（含ajax）
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input type="text" name="ceshi">
<input type="submit" value="获取名单"/>
<table id="table"> </table>
</form>
<script type="text/javascript">
$(function(){
$("input[type=submit]").click(function(){
$.post("ajax",
{"ceshi":$("input[name=ceshi]").val()},
function(data,textStatus){
console.log(data);
for(var i = 0;i<data.length; i++)
{
$("#table").append( $("<tr></tr>")
.append($("<td></td>").html(data[i].name))
.append($("<td></td>").html(data[i].sex))
.append($("<td></td>").html(data[i].age)));
}
},
"json"
);
}); })
</script>
</body>
</html>
servlet部分（调用gson方法处理数据）
servlet部分
@WebServlet("/ajax")
public class ajax extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public ajax() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("utf-8");
String string = request.getParameter("ceshi");
Gson gson = new Gson();
List list = new ArrayList();
User one = new User("张三", "男", 13);
User two = new User("李四","男", 15);
User three = new User("王五","男", 20);
list.add(one);
list.add(two);
list.add(three); String result = gson.toJson(list);
response.getWriter().append(result);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} } User类 public class User {
private String name;
private String sex;
private int age;
public User(String name, String sex, int age) {
this.name = name;
this.sex = sex;
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
} }
servlet与ajax数据交换（json格式）的更多相关文章
- Ajax-06 Ajax数据交换格式
1.数据交换格式 服务端返回的数据,在本质上都是字符串,只是原生Ajax 或jQuery Ajax将这些字符串转换为容易理解的各种常用格式. a. Text 文本字符串 b. XML JavaScr ...
- $.ajax返回的JSON格式的数据后无法执行success的解决方法
近段时间做项目,在项目使用了ajax技术,遇到了一个奇怪的问题:"$.ajax返回的JSON格式的数据无法执行success",代码是这样写的: 1 $.ajax({ 2 .. 3 ...
- ajax接收处理json格式数据
ajax在前后端的交互中应用非常广泛,通过请求后台接口接收处理json格式数据展现在前端页面. 下面我们来简单用 ajax在本地做一个接收并处理json的小例子 首先我们要新建一个叫做data的jso ...
- jquery ajax调用返回json格式数据处理
Ajax请求默认的都是异步的 如果想同步 async设置为false就可以(默认是true) var html = $.ajax({ url: "some.php", async: ...
- Ajax中的JSON格式与php传输过程的浅析
在Ajax中的JSON格式与php传输过程中有哪些要注意的小地方呢? 先来看一下简单通用的JSON与php传输数据的代码 HTML文件: <input type="button&quo ...
- Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用
1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...
- 数据转换为json格式的方法
数据转换为json格式: 如果一张表中存在主外键关系,模板自动生成的类是不可以转换成JSON格式的,此时需要重新写一个类,类前面需加[DataContract],字段前需加[DataMember],实 ...
- jmeter随笔（1）-在csv中数据为json格式的数据不完整
昨天同事在使用jmeter遇到问题,在csv中数据为json格式的数据,在jmeter中无法完整的取值,小怪我看了下,给出解决办法,其实很简单,我们一起看看,看完了记得分享给你的朋友. 问题现象: 1 ...
- C# 任意类型数据转JSON格式（转）
HOT SUMMER 每天都是不一样,积极的去感受生活 C# 任意类型数据转JSON格式 /// <summary> /// List转成json /// </summary> ...
随机推荐
- redis 相关知识
1. 什么是Redis Redis是由意大利人Salvatore Sanfilippo(网名:antirez)开发的一款内存高速缓存数据库.Redis全称为:Remote Dictionary Ser ...
- Hook 无侵入式埋点（页面统计）
一.技术原理 Method-Swizzling 黑魔法 方法交换(不懂的可以查) 二.页面统计 某盟页面统计SDK需要开发者在APP基类里实现ViewDidAppear和viewDidDisappea ...
- Java的LockSupport工具，Condition接口和ConditionObject
在之前我们文章(关于多线程编程基础和同步器),我们就接触到了LockSupport工具和Condition接口,之前使用LockSupport工具来唤醒阻塞的线程,使用Condition接口来实现线程 ...
- java1.8版本的HashMap源码剖析
一.摘要 以下分析内容均是基于JDK1.8产生的,同时也和JDK1.7版本的hashmap做了一些比较.在1.7版本中,HashMap的实现是基于数组+链表的形式,而在1.8版本中则引入了红黑树,但其 ...
- Software Engineering-HW2
title: Software Engineering-HW2 date: 2017-09-21 10:35:47 tags: HW --- 题目描述 从<构建之法>第一章的 " ...
- 项目Beta冲刺Day6
项目进展 李明皇 今天解决的进度 进行前后端联动调试 明天安排 完善程序运行逻辑 林翔 今天解决的进度 服务器端发布消息,删除消息,检索消息,个人发布的action 明天安排 图片功能遇到问题,微信小 ...
- 201621123043 《Java程序设计》第1周学习总结
1. 本章学习总结 Jdk的安装: eclipse的基本使用方法 Java发展史 jdk.jre.jvm 关键词之间的联系:是整个java的核心,包括了一堆java.java基础的类库.java运行环 ...
- Webview之H5页面调用android的图库及文件管理
h5页面打开图片管理器 一般页面在pc打开文件管理器是用 type="file"的代码,可是这在android的webview是无效的,必须为webview设定WebChromeC ...
- Vim 中文社区：期待你的加入
我们的愿景 Vim 中文社区一直比较零散,缺少凝聚力,现有的一些群经常也是水的可以的,讨论各种无关紧要的内容,于是导致很大一部分人,将这些群丢入了群助手,渐渐地他们也淡出了 vim 中文社区. 而我理 ...
- Angular.js 1++快速上手
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Goole所收购.是一款优秀的前端JS框架.AngularJS有着诸多特性,最为核心的是:MVC,撗块化,自动化双向数据绑 ...