后台返回json对象:

package com.sawshaw.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody; import com.alibaba.fastjson.JSONObject; @Controller
@RequestMapping("/hello")
public class HelloController {
@RequestMapping("/greeting")
@ResponseBody
public String greeting(){
JSONObject js=new JSONObject();
js.put("id", "myId");
js.put("content", "mycontent");
return js.toJSONString();
} }

前台解析:

$(document).ready(function() {
$.ajax({
url: "hello/greeting"
}).then(function(data) {
var obj=JSON.parse(data);
//或者var obj=eval("("+data+")");解析
console.log(obj.id);
$('.greeting-id').append(obj.id);
$('.greeting-content').append(obj.content);
});
});
</script>

后台返回数组数据的: 

@Override
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int user_id = Integer.parseInt(request.getParameter("user_id"));
User user;
try {
user = service.queryUserById(user_id);
if (user != null) {
response.getWriter().print(user.getUser_name() + "," + user.getUser_phone() + "," + user.getUser_email() + "," + user.getUser_adress());
} else {
response.getWriter().print("false");
}
} catch (SQLException e) {
e.printStackTrace();
}
}

 前台解析:

 <script>
$(function(){
var id=getUrlParam("id").replace(/\+/g," ");
$("#u_id").val(id);
$.ajax({
url : 'queryByUserId',
type : 'get',
contentType : 'text/html',
data : {user_id:id}
}).done(function(data) {
if(data!=false){
var arr=data.split(",");
if(arr[0]!="null"){
$("#u_name").val(arr[0]);
}
if(arr[1]!="null"){
$("#u_phone").val(arr[1]);
}
if(arr[2]!="null"){
$("#u_email").val(arr[2]);
}
if(arr[3]!="null"){
$("#u_adress").val(arr[3]);
}
}else{
alert("查找用户失败");
}
}).fail(function(data) {
}).always(function() {
console.log("complete");
});
$("#updateSubmit").click(function(){
if($("#u_name").val()==""){
alert("用户名不为空");
}
});
});
function getUrlParam(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r!=null) return unescape(r[2]); return null; //返回参数值
}
</script>

后台返回json数组的:

@WebServlet(urlPatterns = "/userQueryOrder")
public class OrderUserQueryOrderServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
OrderService service = new OrderServiceImpl(); @Override
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
HttpSession session = request.getSession();
User user = (User) session.getAttribute("user");
int user_id = user.getUser_id();
try {
List<Order> list = service.userQueryOrder(user_id);
JSONArray orderList = JSONArray.fromObject(list);
response.getWriter().println(orderList);
} catch (Exception e) {
e.printStackTrace();
}
}

  

前台解析:

$.ajax({
url : 'userQueryOrder',
type : 'get',
dataType : 'json',
contentType:'text/html'
}).done(function(data) {
//var json=eval("("+data+")");
for(var i=0;i<data.length;i++){
$("#orderList").append("<table>"
+"<tr class='order_detail'>"
+"<td class='order_id'>"+ data[i].order_id+"</td>"
+"<td class='order_price'>"+data[i].order_price+"</td>"
+"<td class='order_time'>"+(parseInt(data[i].order_time.year)+1900)+"-"+(parseInt(data[i].order_time.month)+1)+"-"+(data[i].order_time.date)+" "+(parseInt(data[i].order_time.hours)+1)+":"+(data[i].order_time.minutes)+":"+(data[i].order_time.seconds)+"</td>"
+"</tr>"
+"</table>"
+"<table class='orderDetail' style='display:none;'>"
+"<tr>"
+"<td>商品名</td>"
+"<td>价格(元)</td>"
+"<td>数量</td>"
+"</tr>"
+"</table>"
+"<div class='XX'>"
+"</div>");
}
}).fail(function(data) {

  

 

 

  

springMVC前后台交互的更多相关文章

  1. JAVA配置&注解方式搭建简单的SpringMVC前后台交互系统

    前面两篇文章介绍了 基于XML方式搭建SpringMVC前后台交互系统的方法,博文链接如下: http://www.cnblogs.com/hunterCecil/p/8252060.html htt ...

  2. springMVC前后台数据交互

    假设项目需求是在springMVC框架下,后台要传送一个list到前台,那我们就要做以下几个步骤: 1 在web.xml文件中进行springMVC的配置: <?xml version=&quo ...

  3. 前后台交互经常使用的技术汇总(后台:Java技术,前台:Js或者Jquery)

    1:由于针对特定的前后台交互用到的知识总结,所以不大量贴代码,主要给出思路,方便自己以后脑补和技术总结,当然也希望可以帮助到别人. 后台Json和其他格式转化,之前总结过Json和对象,集合,字符串的 ...

  4. 基础框架整合-ssm框架+前后台交互完整教程

    1.基本概念 ssm:spring+springMVC+mybatis 2.开发环境 Eclipse mars + jdk1.7 + maven + tomcat7 3.使用maven构建web项目 ...

  5. Devexpress 使用经验 —— ASPxGridView前后台交互写法推荐

    这里的格式是仁者见仁智者见智,这篇随笔只是我在工作过程中总结出的阅读性高,对我来说效率较高的写法. ASPX: <dx:ASPxGridView ID="ASPxGridViewLin ...

  6. jquery ajax返回json数据进行前后台交互实例

    jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...

  7. ajax实现异步前后台交互,模拟百度搜索框智能提示

    1.什么是异步?在传统的网站项目中,填写一堆数据,最后点击提交,在点击提交的这一刻才实现数据提交,前后台交互.在你点击提交之前数据是没有提交到后台的.这样就会造成很大的不便.比如,我填了一大堆数据,结 ...

  8. WebSocket前后台交互

    其实对于前后台交互有很多种方法(只列举我知道的,嘻嘻): 1:from 表单: 使用场景——小信息量提交给后台 2:ajax(跨域的话用jsonp): 可以进行多量的前后台信心传递: 但实时性不高,不 ...

  9. MySQL前后台交互登录系统设计

    1.首先我们做一个前台的注册页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

随机推荐

  1. 不确定行数的多行文本垂直水平居中的css

    ul li { position:relative; display: table; width:3rem; height:3rem; background:url('image/defaultBg. ...

  2. 比SRCNN效果好的传统超分辨率算法汇总

    1.基于深度协作表达的人脸图像超分辨率算法研究与应用_百度学术 采用一种深度协作表达算法框架,构造深度的多线性模型 分段拟合高低分辨率图像块之间的非线性关系,本文算法简洁高效,提供了一种新的深度学习模 ...

  3. 【matlab】命令行窗口一直不停的输出ans=1?

    ans= 1 matlab里面的ans是一个系统量,当m文件中出现非赋值性的计算时,matlab会把结果自动存入ans. 如果m文件中每一个计算都是赋值的,即所计算的结果都是保存在自己设定的变量中的, ...

  4. Java从控制台接受输入字符

    创建一个类,在该类的主方法中创建Scanner扫描起来封装System类的in输入流,然后提示用户输入身份证号码,并输入身份证号码的位数. 代码如下: import java.util.Scanner ...

  5. 手机APP支付--整合银联支付控件

    长话短说,本文根据银联官方说明文档,简单总结下,并且说明下中途碰到问题该如何解决. 一.开发前的准备工作1. 打开https://open.unionpay.com/,后续说的文档下载.FAQ查询等都 ...

  6. 8 -- 深入使用Spring -- 3...1 Resource实现类ClassPathResource

    8.3.1 Resource实现类------ClassPathResource : 访问类加载路径下的资源的实现类 2.访问类加载路径下的资源 ClassPathResource 用来访问类加载路径 ...

  7. ios开发之--UIViewContentMode详解

    在开发当中有时会有这样的需求,将从服务器端下载下来的图片添加到imageView 当中展示,但是下载下来的图片尺寸大小不固定,宽高也有可能不成比例 如果直接设置imageView的image属性而不设 ...

  8. vux 使用 loading 组件

    1)声明引入Loading import { Loading } from 'vux' 2)在模版底部添加 组件(需要添加到 template>div 标签里) <template> ...

  9. iOS开发--关闭ARC

    对整个项目关闭ARC project -> Build settings -> Apple LLVM complier 3.0 - Language -> objective-C A ...

  10. 《C++ Primer Plus》16.1 string类 学习笔记

    16.1.1 构造字符串程序清单16.1使用了string的7个构造函数.程序清单16.1 str1.cpp---------------------------------------------- ...