后台返回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. varchar和nvarchar的区别 数据来证明

    如果一个数据是"N好"数据类型是varchar时: select len(vartest) from testselect datalength(vartest) from tex ...

  2. Spring学习总结六——SpringMVC一

    一:什么是springMVC MVC,顾名思义,m就是model模型,包括处理业务.访问数据库以及封装数据实体类等,view视图层 负责和用户进行交互,就是展示给用户的部分,包括jsp页面,html等 ...

  3. linux添加PYTHONPATH环境变量

    1.添加环境变量到pythonpath export PYTHONPATH=$PYTHONPATH:/home/myproject 查看pythonpathecho $PYTHONPATH 可以进入p ...

  4. [Module] 08 - MVP by Mosby

    From: Mosby MVP使用教程[作者用心] View是消极视图(Passive View), 它尽量不去主动做事, 让Presenter通过抽象方式控制View 例子: 例如Presenter ...

  5. JQuery Mobile难点备忘

    1 固定header: data-position="fixed",如果仅仅是加了这个属性,当页面出现滚动条的时候点击页面内容,header还是会隐藏显示全屏,如果不需要这样,加入 ...

  6. 有人在贴吧问phpmyadmin如何设置插入的时候默认插入1条记录

    在新版phpmyadmin中(我的版本是3.5.1) 插入的时候会提示插入两条,能够方便操作,让你多录入几条数据,如图 然而有人不想要这个界面默认插入两条,如何改为1条或者其他呢? 我审查了这个元素标 ...

  7. my97date 时间范围限制

    需求:根据开始时间,动态限制结束时间 实现: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. 全屏加载loading显示的解决方法

    step1:可以在网页里加一个div用来现实loading. <div id="loading"> <!--这里放你的loading时显示的动画或者文字--> ...

  9. 深入浅出MFC——MFC多线程程序设计(七)

    1. 从操作系统层面看线程——三个观念:模块(MDB).进程(PDB).线程(TDB) 2. “执行事实”发生在线程身上,而不在进程身上.也就是说,CPU调度单位是线程而非进程.调度器据以排序的,是每 ...

  10. Android中实现定时器的3中方法

    在Android开发中,定时器一般有以下3种实现方法: 一.采用Handler与线程的sleep(long)方法: 二.采用Handler的postDelayed(Runnable, long)方法: ...