Jsp页面用ajax传输json数组的方法
详细参考jquery的API
这里主要展示实例,即写法
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/paike/js/bootstrap-3.3.2-dist/css/bootstrap.css" />
<link rel="stylesheet" href="/paike/js/bootstrap-3.3.2-dist/css/bootstrap-theme.css" />
<script type="text/javascript" src="/paike/js/jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="/paike/js/jquery.bootstrap.min.js"></script>
<script type="text/javascript" src="/paike/js/plugins/jquery.form.js"></script>
<script type="text/javascript" src="/paike/js/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/paike/js/My97DatePicker/WdatePicker.js" ></script>
<script type="text/javascript" src="/paike/js/plugins/jquery.twbsPagination.min.js"></script>
<script type="text/javascript" src="/paike/js/plugins-override.js"></script> <script> $(function(){ $(".time").click(function(){
WdatePicker();
}); $(".queRenBtn").click(function(){
//获取打钩的内容
var checkbox = $("#cltcTable").find(":checked");
if(checkbox.length == 0 ){
return;
} else {
// 获取id. 拼装成一个字符串
var str = '';
for(var i = 0 ; i < checkbox.length;i++){
var ck = checkbox[i];
str+=$(ck).val().trim() + "_";
}
str = str.substr(0, str.length-1);
$.ajax({
url:'/paike/paike/queRen',
data:{ids:str},
success:function(data){
if(data.success){
window.location.href='/paike/paike/list'
} else {
window.alert(data.msg);
}
}
});
}
}); $("#cltcTable tr").click(function(){
$(this).find('input[type=checkbox]').click();
}); $("#query").click(function(){
$("#currentPage").val(1);
$("#searchForm").submit();
}) $("#pager").twbsPagination({ //生成分页插件
totalPages:${pageResult.totlePage},//一共多少頁
visiblePages:5, //可見分頁數量
startPage:${pageResult.currentPage},//當前是多少頁 onPageClick:function(event,page){ //page就是你点的页数
$("#currentPage").val(page); // 查詢的時候先設置一下多少頁
$("#searchForm").submit(); //表單提交
}
});
}) </script>
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<div class="navbar">
<form action="/paike/paike/list" id="searchForm" class="form-inline">
<input type="hidden" name="currentPage" id="currentPage"/> <div class="btn-group navbar-left clearfix">
<div class="form-group">
<label for="major_info">所学专业:</label>
<select id="major_info" class="form-control" name="majorid">
<option value="">请选择</option>
<c:forEach items="${majorList }" var="major">
<option value="${major.id }" <c:if test="${major.id == classinfoVo.majorid }">selected</c:if>>${major.name }</option>
</c:forEach>
</select>
</div>
<div class="form-group">
<label for="pai">排课状态:${classinfoVo.confirmstatus }</label>
<select id="pai" class="form-control" name="confirmstatus">
<option value="" >请选择</option>
<option value="0" <c:if test="${'0' == classinfoVo.confirmstatus }">selected</c:if>>排课中</option>
<option value="1" <c:if test="${'1' == classinfoVo.confirmstatus }">selected</c:if>>已确认</option>
</select>
</div>
<div class="form-group">
<label for="finish">结课状态:</label>
<select id="finish" class="form-control" name="finishstatus">
<option value="">请选择</option>
<option value="0" <c:if test="${0 == classinfoVo.finishstatus }">selected</c:if>>未结课</option>
<option value="1" <c:if test="${1 == classinfoVo.finishstatus }">selected</c:if>>已结课</option>
</select>
</div>
<div class="form-group">
<label>入学时间:</label>
<input style="width:100px;" class="form-control time" name="startDate" type="text" value="${classinfoVo.startDate }" />~
<input style="width:100px;" class="form-control time" name="endDate" type="text" value="${classinfoVo.endDate }" />
</div>
</div>
<div class="">
<div class="btn-group navbar-right" style="margin-top:25px;">
<button type="submit" id="query" class="btn btn-default glyphicon-plus">查询</button>
<a class="btn btn-default btn-danger">批量结课</a>
<a class="btn btn-default btn-warning queRenBtn" >批量确认</a>
</div>
</div> </form>
</div>
<div class="panel panel-default">
<div class="panel-heading">班级信息</div>
<table id="cltcTable" class="table table-hover table-striped table-bordered" >
<tr>
<th></th>
<th>班级名称</th>
<th>班级位置</th>
<th>班主任</th>
<th>入学时间</th>
<th>所修专业</th>
<th>排课状态</th>
<th style="width:200px">操作</th>
</tr>
<c:forEach items="${pageResult.dataList }" var="classinfo"> <tr>
<td class="text-center"><input type="checkbox" name="classid" value="${classinfo.id }"/></td>
<td>${classinfo.name }</td>
<td>${classinfo.location }</td>
<td>${classinfo.manager.name }</td>
<td>${classinfo.starttime }</td>
<td>${classinfo.major.name }</td>
<td>
${classinfo.confirmstatus == 0? '排课中':'已确认' }
</td>
<td>
<c:if test="${classinfo.confirmstatus == 0 }">
<button class="btn btn-warning btn-xs" onclick="window.location.href='/paike/paike/gotoPai?classid=${classinfo.id}'">排课</button>
</c:if>
<c:if test="${classinfo.confirmstatus == 1 }">
<button class="btn btn-info btn-xs" onclick="window.location.href='pai.html'">详情</button>
</c:if> <c:if test="${classinfo.finishstatus == 0 }">
<button class="btn btn-danger btn-xs" onclick="window.location.href='pai.html'">结课</button>
</c:if>
</td>
</tr>
</c:forEach>
</table>
</div>
<div id="pager"></div>
</div>
</div>
</body>
</html>
后台接收
@RequestMapping("queRen")
@ResponseBody
public JsonResult queRen(String ids) {
JsonResult jsonResult = new JsonResult();
try {
classinfoService.queRen(ids);
jsonResult.setMsg("成功");
return jsonResult;
} catch (Exception e) {
e.printStackTrace();
jsonResult.setSuccess(false);
jsonResult.setMsg("服务器出错, 请联系管理员!");
return jsonResult;
}
}
jsonResult
package com.offcn.utils;
public class JsonResult {
private boolean success = true;
private String msg;
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
Jsp页面用ajax传输json数组的方法的更多相关文章
- Springboot+ajax传输json数组以及单条数据的方法
Springboot+ajax传输json数组以及单条数据的方法 下面是用ajax传输到后台单条以及多条数据的解析的Demo: 结构图如下: 下面是相关的代码: pom.xml: <?xml v ...
- struts2：JSON在struts中的应用（JSP页面中将对象转换为JSON字符串提交、JSP页面中获取后台Response返回的JSON对象）
JSON主要创建如下两种数据对象: 由JSON格式字符串创建,转换成JavaScript的Object对象: 由JSON格式字符串创建,转换成JavaScript的List或数组链表对象. 更多关于J ...
- Django--多对多表的创建、contentType、ajax、ajax传输json数据格式、ajax传输文件数据、 自定义分页器
MTV与MVC(了解): MTV模型(Django用的就是MTV): M:模型层(models.py) T:templates C:views MVC模型: M:模型层(models.py) V:视图 ...
- Django之AJAX传输JSON数据
目录 Django之AJAX传输JSON数据 AJAX 中 JSON 数据传输: django响应JSON类型数据: django 响应 JSON 类型数据: Django之AJAX传输JSON数据 ...
- jsp页面通过ajax取值/展示数据及分页显示
jsp页面通过ajax从后台获取数据,在页面展示,并实现分页效果代码: [JavaScript部分代码] 1 <script> function getComposition(pageno ...
- 使用session在jsp页面之间传递多维数组，用于实现全局变量的效果
使用session在jsp页面之间传递多维数组:发送数据的jsp页面:int [][] form_number=new int[4][4]; session.setAttribute("se ...
- $.ajax传输js数组，spring接收异常
今天测试,出现一个奇怪的问题 $.ajax传输js数组,spring接收这个数组,出现奇怪的现象,如果数组只有一个元素,且这个元素字符串最后一个字符是以逗号,结尾的话, spring会自动把这个逗号去 ...
- ThinkPHP中使用ajax接收json数据的方法
本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...
- Django和前端用ajax传输json等数据
需要传输的是下图中所有的input中客户端设置的数据 整个页面是用js生成,代码不长,但是用了许多拼接,看起来开比较乱,页面的核心就是下面的部分,有一些关键参数部分就不放了,可以跳过这个 下面开始重点 ...
随机推荐
- 被“1”和“l”给坑了
由于输入法的原因,导致小写的英文字母“L”和阿拉伯数字“1”长得非常像,在写秘钥的时候很容易把看错.由于对方发秘钥的时候给的是图片,而且不太清晰,手动输入的时候把“1”写成“l”了,对了好几遍秘钥也没 ...
- 从数据库到NoSQL思路整理
1. 数据库为什么要算范式?细说起来太多. 范式解决了数据冗余,从而保证ACID的操作性能.不然一堆删除异常,插入异常,就没法愉快的写SQL了 另外,对于多个业务公用的数据库,范式解决了集成的问题. ...
- java中的static（包括类前面修饰的static、方法前面修饰的static、成员变量前面修饰的static）
static是静态修饰符: 什么叫静态修饰符呢?大家都知道,在程序中任何变量或者代码都是在编译时由系统自动分配内存来存储的,而所谓静态就是指在编译后所分配的内存会一直存在,直到程序退出内存才会释放这个 ...
- 21 Guns -- Green Day
21 Guns Green Day (绿日乐队)的代表曲之一.歌曲的主题是反战,同时安慰了曾 经信任布什政府如今失望透顶的美国民众.这首歌也被电影< ...
- Eclipse代码提示功能设置
1. 解决实例化时自动补全不必要的单词问题 2. 以MyEclipse 6.5重新配图 鉴 于网上的批评之声甚大,我只想说明我的想法:这样的增强代码提示,最终是用来辅助我们 ...
- Delphi Dll 动态调用例子(3)-仔细看一下
http://blog.163.com/bxf_0011/blog/static/35420330200952075114318/ Delphi 动态链接库的动态和静态调用 为了让人能快速的理解 静态 ...
- matlab的特殊字符（上下标和希腊字母等）
'T=25\circC',(摄氏度) 下标用 _(下划线) 上标用^ (尖号) 希腊字母等特殊字符用 α \alpha β \beta γ \gamma θ \theta Θ \Theta Г \Ga ...
- Win10系统下编译OSG3.4
环境说明 1.Win10专业版.64位: 2.VS2012旗舰版:QT5.2.0: 3.cmake-3.9.0.64位: 资源准备 1.OSG3.4源码包 http://trac.opensceneg ...
- K8S+GitLab-自动化分布式部署ASP.NET Core(一) 部署环境
一.部署流程介绍 开发人员通过Git上传asp.net core 项目到Gilab,并编写好.gitlab-ci.yml , GitLab-Runner 自动拉取代码,然后进行Build,编译,单元测 ...
- Eclipse设置代理
Windows->Preferences->General->Network Connections下面可以设置代理 如果要指定特定的代理地址,需要把类型改为Manual 通常htt ...