servlet与ajax数据交换(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的异步传输传至servletservlet处理数据后,通过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 = "{"+"http://www.likecs.com/"name/""+":"+"http://www.likecs.com/""+name+"http://www.likecs.com/""+","+"http://www.likecs.com/"age/""+":"+"http://www.likecs.com/""+age+"http://www.likecs.com/""+","+"http://www.likecs.com/"sex/""+":"+"http://www.likecs.com/""+sex+"http://www.likecs.com/""+"}";

(2)调用第三方封装好的  json 数据转换方法(个人使用的是Gson,链接地址:https://pan.baidu.com/s/1Yu91BYlqoJSXpzk37ZXZ6g)

建议使用这种方法,高效,简洁,适用于各种数据集合(list,map等)。详细使用可看下列实例(具体代码1)。

具体实例代码1(采用第一种字符串拼接方式)

前端html部分(含ajax)

 

1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>Insert title here</title> 5 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 6 </head> 7 <body> 8 <div class="box"> 9 <table> 10 <tr> 11 <td>姓名</td> 12 <td><input name="username" type="text"></td> 13 </tr> 14 <tr> 15 <td>性别</td> 16 <td><input name="sex" type="text"></td> 17 </tr> 18 <tr> 19 <td>年龄</td> 20 <td><input name="age" type="text"></td> 21 </tr> 22 <tr> 23 <td>手机号</td> 24 <td><input name="phone" type="text"></td> 25 </tr> 26 <tr><td><button>提交</button></td></tr> 27 </table> 28 </div> 29 <div> 30 <table> 31 信息返回 32 <tr> 33 <td>姓名</td> 34 <td id="name"></td> 35 </tr> 36 <tr> 37 <td>性别</td> 38 <td id="sex"></td> 39 </tr> 40 <tr> 41 <td>年龄</td> 42 <td id="age"></td> 43 </tr> 44 <tr> 45 <td>手机号</td> 46 <td id="phone"></td> 47 </tr> 48 </table> 49 </div> 50 <script> 51 $(function(){ 52 $("button").click(function(){ 53 $.post("AjaxTest", 54 {'username':$("input[name=username]").val(), 55 'sex':$("input[name=sex]").val(), 56 'age':$("input[name=age]").val(), 57 'phone':$("input[name=phone]").val()}, 58 function(data,textStatus){ 59 console.log(textStatus); 60 console.log(data.username); 61 $("#name").html(data.username); 62 $("#sex").html(data.sex); 63 $("#age").html(data.age); 64 $("#phone").html(data.phone); 65 },"json"); 66 }); 67 68 }) 69 </script> 70 </body> 71 </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpxjgz.html