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> ...
随机推荐
- 设计模式之 外观模式详解（Service第三者插足，让action与dao分手）
作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 各位好,LZ今天给各位分享一 ...
- vs运行单个cpp文件
打开vs,新建项目,左侧win32见上图,右侧 win32控制台应用程序,填好名称后,确定----下一步,如下图,空项目 紧接着如下图,通过现有项添加自己的cpp文件,便可以运行了
- alpha-咸鱼冲刺day7（后续一波）-紫仪
总汇链接 一,合照 emmmmm.自然还是没有的. 二,项目燃尽图 三,项目进展 正在写登陆+注册ing 注册搞出来了!!!!!!!!QAQ(喜极而泣!!!!.jpg) 四,问题困难 数据流程大概是搞 ...
- Bate敏捷冲刺每日报告--day5
1 团队介绍 团队组成: PM:齐爽爽(258) 小组成员:马帅(248),何健(267),蔡凯峰(285) Git链接:https://github.com/WHUSE2017/C-team 2 ...
- Beta冲刺Day1
项目进展 李明皇 今天解决的进度 点击首页list相应条目将信息传到详情页 明天安排 优化信息详情页布局 林翔 今天解决的进度 前后端连接成功 明天安排 开始微信前端+数据库写入 孙敏铭 今天解决的进 ...
- 如何进行服务器Linux系统下的ext文件系统修复
一.故障描述 服务器是dell 730系列服务器,存储阵列是MD3200系列存储5T的Lun,操作系统是Linux centos 7,文件系统类型是EXT4,因意外断电,导致系统不能正常启动,修复之后 ...
- vue 中获取select 的option的value 直接click？
我刚开始遇到这个问题的时候 直接用的click进行dom操作获取value 但是发现并灭有什么作用 问了旁边大神 才想起来还有change这个操作 于是乎 答案有了解决方案 1.在你的select中添 ...
- 彻底搞懂shell的高级I/O重定向
本文目录: 1.1 文件描述符(file description,fd) 1.2 文件描述符的复制 1.3 重定向顺序很重要:">file 2>&1"和&quo ...
- Pandas速查手册中文版
本文翻译自文章: Pandas Cheat Sheet - Python for Data Science ,同时添加了部分注解. 对于数据科学家,无论是数据分析还是数据挖掘来说,Pandas是一个非 ...
- Linux--慕课学习
刚开始接触Linux,很有幸的在慕课网上看到了Peter老师的Linux入门课程,老师讲课真的式行云流水,深入浅出,循循善诱,层层递进. 老师分享的都是自己多年来总结的经验.看完之后也学到了很多东西. ...