springMVC前后台交互
后台返回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前后台交互的更多相关文章
- JAVA配置&注解方式搭建简单的SpringMVC前后台交互系统
前面两篇文章介绍了 基于XML方式搭建SpringMVC前后台交互系统的方法,博文链接如下: http://www.cnblogs.com/hunterCecil/p/8252060.html htt ...
- springMVC前后台数据交互
假设项目需求是在springMVC框架下,后台要传送一个list到前台,那我们就要做以下几个步骤: 1 在web.xml文件中进行springMVC的配置: <?xml version=&quo ...
- 前后台交互经常使用的技术汇总(后台:Java技术,前台:Js或者Jquery)
1:由于针对特定的前后台交互用到的知识总结,所以不大量贴代码,主要给出思路,方便自己以后脑补和技术总结,当然也希望可以帮助到别人. 后台Json和其他格式转化,之前总结过Json和对象,集合,字符串的 ...
- 基础框架整合-ssm框架+前后台交互完整教程
1.基本概念 ssm:spring+springMVC+mybatis 2.开发环境 Eclipse mars + jdk1.7 + maven + tomcat7 3.使用maven构建web项目 ...
- Devexpress 使用经验 —— ASPxGridView前后台交互写法推荐
这里的格式是仁者见仁智者见智,这篇随笔只是我在工作过程中总结出的阅读性高,对我来说效率较高的写法. ASPX: <dx:ASPxGridView ID="ASPxGridViewLin ...
- jquery ajax返回json数据进行前后台交互实例
jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...
- ajax实现异步前后台交互,模拟百度搜索框智能提示
1.什么是异步?在传统的网站项目中,填写一堆数据,最后点击提交,在点击提交的这一刻才实现数据提交,前后台交互.在你点击提交之前数据是没有提交到后台的.这样就会造成很大的不便.比如,我填了一大堆数据,结 ...
- WebSocket前后台交互
其实对于前后台交互有很多种方法(只列举我知道的,嘻嘻): 1:from 表单: 使用场景——小信息量提交给后台 2:ajax(跨域的话用jsonp): 可以进行多量的前后台信心传递: 但实时性不高,不 ...
- MySQL前后台交互登录系统设计
1.首先我们做一个前台的注册页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
随机推荐
- (IRCNN)Learning Deep CNN Denoiser Prior for Image Restoration-Kai Zhang
学习深度CNN去噪先验用于图像恢复(Learning Deep CNN Denoiser Prior for Image Restoration)-Kai Zhang 代码:https://githu ...
- 如何在Java 环境下使用 HTTP 协议收发 MQ 消息
1. 准备环境在工程 POM 文件添加 HTTP Java 客户端的依赖. <dependency> <groupId>org.eclipse.jetty</groupI ...
- Go 文件操作(创建、打开、读、写)
https://blog.csdn.net/Tovids/article/details/77887946
- 字符编码笔记:ASCII,Unicode 和 UTF-8
http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html
- linux 中搜索命令的对比
1.find find是最常用和最强大的查找命令.它能做到实时查找,精确查找,但速度慢. find的使用格式如下: #find [指定目录] [指定条件] [指定动作] 指定目录:是指所要搜索的目录和 ...
- php 内存分配
php内核中的内存分配 使用的函数有 emalloc(), erealloc() ,这两个函数分别是malloc(),realloc()函数的封装 关于内存分配有四个容器:cache,小块内存链表,大 ...
- android中sharedPreferences的用法(转)
SharedPreferences介绍: 做软件开发应该都知道,很多软件会有配置文件,里面存放这程序运行当中的各个属性值,由于其配置信息并不多,如果采用数据库来存放并不划算,因为数据库连接跟操作等 ...
- struts2防止反复提交的办法
<? xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC " ...
- 诡异的DataTime.Now.ToString()
昨天晚上调程序的时候在服务器上出现这种问题 DataTime.Now.ToString("yyyy-MM-dd HH:mm:ss") 居然出现了2014-8-14 8:nn:14: ...
- 【AI】Ubuntu NVIDIA CUDA CUDNN安装配置
https://blog.csdn.net/qq_33200967/article/details/80689543 https://blog.csdn.net/sinat_29963957/arti ...