Ajax前后台交互 返回普通格式和JSON格式
2017-10-20 12:45
302 查看
采用阿里fastJson 下面是pom.xml
Ajax返回字符串
Ajax返JSON格式
附
Json格式转换
结果
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.9</version> </dependency>
Ajax返回字符串
//js前台ajax 注意引入jquery文件 如jquery.min.js等 function testAjax() { //文本的值 var uname = $("#username").val(); var pwd = $("#password").val(); //alert(pwd) $.ajax({ type : 'post', //提交方式 url : "../ReturnString.do", //路径 //参数 data : { username : uname, password : pwd }, cache : false, //返回普通的字符流不要写 dataType : "json" success : function(data) { alert(data); } }); } //html代码 我绑定的是焦点失去事件 所以加了一个测试框 <form action="#" id="myform"> 姓名:<input type="text" id="username" name="username" /><br /> 密码:<input type="text" name="password" id="password" onblur="testAjax()" /> <br /> 测试框:<input type="text" /> <br /> ${pageContext.request.contextPath} </form> //后台代码 只是功能测试 没有写实际内容 @RequestMapping("/ReturnString") //这是spring框架的注解 public void ReturnString(String username,String password,HttpServletResponse response){ System.out.println(username+password); try { //写入out对象流 response.getWriter().println("测试的字符串"); } catch (IOException e) { e.printStackTrace(); } }
Ajax返JSON格式
//前台ajax function ReturnJsonList() { $.ajax({ type : 'post', url : '../ReturnJsonList.do', dataType : "json", success : function(data) { alert(data); //i循环的次数 value对象 id,name等是属性 $.each(data, function(i, value) { $("#remark").append( " <tr><td>" + value.id + "</td><td>" + value.name + "</td><td>" + value.t + "</td><td>" + value.x + "</td></tr>"); }); } }); }
//html代码 测试用的按钮的单击时间 然后返回集合拼接到表格 <input type="button" name="测试返回JSON格式List集合" onclick="ReturnJsonList()" /> <table class="table table-striped" id="remark"> <tr> <td>学号</td> <td>姓名</td> <td>日期</td> <td>年龄</td> </tr> </table>
//后台代码 @RequestMapping("/ReturnJsonList") public void testPrco(HttpServletResponse response){ System.out.println("ok ReturnJsonList"); try { List<Demo> list = new ArrayList<>(); Demo d1 = new Demo(1,"测试01", 50, new Date()); Demo d2 = new Demo(2,"测试02", 50, new Date()); Demo d3 = new Demo(3,"测试03", 50, new Date()); //日期转换 在实体对象属性上加@JSONField (format="yyyy-MM-dd") list.add(d1); list.add(d2); list.add(d3); /*Map<Integer, String> map = new HashMap<>(); map.put(1, "test01"); map.put(2, "test02"); map.put(3, "test03");*/ //简单粗暴,对于Map这句也适用 String json = JSON.toJSONString(list); System.out.println(json); //取得流向JSP传递数据 response.getWriter().println(json); } catch (IOException e) { e.printStackTrace(); } }
附
Json格式转换
public static void main(String[] args) { List<Object> list = new ArrayList<>(); list.add("测试"); list.add("测试2"); list.add("测试3"); //JSON格式转换 map 字符串都适应 String str = JSON.toJSONString(list); System.out.println(str); }
结果
["测试","测试2","测试3"]
相关文章推荐
- ajax请求后台,返回json格式数据,模板!
- FLEX4.7 与Java后台交互返回json格式的数组 并赋值给前台datagrid
- Ajax调用查看页面的后台返回json格式数据
- ajax请求正常,返回json格式,后台没问题,浏览器500
- struts2 + ajax(由前台的form提交数据到后台,再根据form所调用返回获取的后台json格式的数据返回到前端,然后前端用jquery对json数据进行解析)==》》涉及文件上传的部分
- 将后台List对象以Json格式返回到前台Ajax请求
- struts2 + ajax(由前台的form提交数据到后台,再根据form所调用返回获取的后台json格式的数据返回到前端,然后前端用jquery对json数据进行解析)==》》涉及非文件上传的部分
- struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- var dataObj=eval("("+data+")");//转换为json对象(解决在ajax返回json格式数据的时候明明正确的获取了返回值但是却就是进不去success方法的问题。格式错误)
- 夺命雷公狗jquery---54通过ajax的底层实现返回json格式的数据
- ajax异步 servlet返回json格式数据注意 “ ‘ 的区别
- ajax处理请求,以JSON数据格式返回,(json时间日期返回时对象---》日期格式)
- jsp中利用jquery+ajax传递json格式参数与前后台之间
- 使用Ajax发送Struts2请求返回JSON数据格式
- ajax 提交 json格式数据到后台
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- $.ajax返回的JSON格式的数据后无法执行success的解决方法
- Ajax学习三——返回json格式数据