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生成,代码不长,但是用了许多拼接,看起来开比较乱,页面的核心就是下面的部分,有一些关键参数部分就不放了,可以跳过这个下面开始重点 ...

随机推荐

DEVEXPRESS 破解方法
Devexpress 是.net的一个非常好用的插件.能够轻松的帮你实现一个非常炫的UI,无论是C#的Winform还是ASP.NET的网站. 鄙人这两天在用DEVEXPRESS的过程中发现在网上并未 ...
wadl 的自动生成（cxf版本3.1.1）
官方文档 http://cxf.apache.org/docs/jaxrs-services-description.html 举例: package cn.zno; import javax.ws. ...
Go语言的传参和传引用[转]
目录[-] 传参和传引用的问题传slice不是传引用! 什么叫传引用? 为什么传slice不是传引用? 为什么很多人误以为slice是传引用呢? 传指针和传引用是等价的吗? 所有类型的函数参数都是传 ...
hdu1089 Ignatius's puzzle
题目其实这道题不是很难,但是我刚开始拿到这道题的时候不知道怎么做, 因为这个式子我就不知道是干什么的: 65|f(x) 百度解释(若a/b=x...0 称a能被b整除,b能整除a,即b|a,读作& ...
Index--过滤索引和参数化
--============================================ 领导指点我去给某台数据库调优下,结果屁颠屁颠地干完,还自我感觉良好,刚刚别人博客时,才发现自己踩坑了!! ...
AgentJob--无法重启Job--22022错误
错误描述: 发现有个Job计划为长期重复运行,但从某个时间点后未运行,无任何错误信息. 手动启动该Job后爆以下错误运行环境: Window Server 2008 R2 Enterprise Mi ...
VS2012安装ClaudiaIDE失败
上班看见同事的VS界面.如下图: 出于好奇就问他是怎么弄的,同事告诉我说是VS的一个插件ClaudiaIDE:于是我就去官网上下载ClaudiaIDE, 官网下载ClaudiaIDE链接:http:/ ...
c#与c++类型
C/C++ C# HANDLE, LPDWORD, LPVOID, void* IntPtr LPCTSTR, LPCTSTR, LPSTR, char*, const char*, Wchar_t* ...
pageadmin CMS网站制作教程：
pageadmin CMS网站建设教程:模板中如何实现信息数据共享很多时候信息数据需要共享,一个最常用的应用场景就是手机版(独立手机,非响应式)本共享pc版本数据,下面以这个场景为例讲解. 假设手机 ...
PhoneGap原理
http://www.oschina.net/question/213217_46380

Jsp页面用ajax传输json数组的方法

Jsp页面用ajax传输json数组的方法的更多相关文章

随机推荐

热门专题