AJax 遍历json对象数组
json解决日期转换
JSP页面 V层
<%@ 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>
</head>
<body>
<table border="1" cellspacing="0px" style="width: 100%;">
<tr align="center">
<tr id="trs">
<td>图书名称</td>
<td>图书作者</td>
<td>购买时间</td>
<td>图书分类</td>
<td>操作</td>
</tr>
</table>
<a href="NewBook.jsp">新增图书信息</a>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function transferTime(cTime) { //将json串的一串数字进行解析
var jsonDate = new Date(parseInt(cTime));
// alert(jsonDate);
//为Date对象添加一个新属性，主要是将解析到的时间数据转换为我们熟悉的“yyyy-MM-dd hh:mm:ss”样式
Date.prototype.format = function(format) {
var o = {
//获得解析出来数据的相应信息，可参考js官方文档里面Date对象所具备的方法
"y+": this.getFullYear(), //得到对应的年信息
"M+": this.getMonth() + 1, //得到对应的月信息，得到的数字范围是0~11，所以要加一
"d+": this.getDate(), //得到对应的日信息
"h+": this.getHours(), //得到对应的小时信息
"m+": this.getMinutes(), //得到对应的分钟信息
"s+": this.getSeconds(), //得到对应的秒信息
}
//将年转换为完整的年形式
if(/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "") .substr(4 - RegExp.$1.length));
}
//连接得到的年月日 时分秒信息
for(var k in o) {
if(new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]) .substr(("" + o[k]).length));
}
}
return format;
}
var newDate = jsonDate.format("yyyy-MM-dd");
return newDate;
}
function transferTimea(aaa,i,result) { //将json串的一串数字进行解析
if (i % 2 == 0) {
var temp = "<tr><td>"+result[i].name+"</td><td>"
+ result[i].author
+ "</td><td>"
+ transferTime(result[i].time)
+ "</td><td>"+aaa+"</td><td><a href='#?Id="+result[i].Id+"'>11</a></td></tr>"
} else {
var temp = "<tr> <td>"+result[i].name+"</td><td>"
+ result[i].author
+ "</td><td>"
+ transferTime(result[i].time)
+ "</td><td>"+aaa+"</td><td><a href='#?Id="+result[i].Id+"'>11</a></td></tr>"
}
$("#trs").after(temp)
}
var data = {}
$
.ajax({
"url" : "Xxx", // 要提交的URL路径
"type" : "get", // 发送请求的方式
"data" : data, // 要发送到服务器的数据
"dataType" : "json",
"beforeSend" : function() {
},// 指定传输的数据格式
"success" : function(result) {
var temp = "";
for (var i = 0; i < result.length; i++) {
/* JSON.parse(jsonstr); */
switch (result[i].type) {
case 1:
transferTimea("计算机/软件",i,result)
break;
case 2:
transferTimea("小说/文稿",i,result)
break;
case 3:
transferTimea("杂项",i,result)
break;
default:
break;
}
}
}
});
</script>
</body>
</html>Servlet 处理界面 C层
package webDemo05.kgc.Servletbook;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONObject;
import webDemo05.kgc.pojo.Book;
import webDemo05.kgc.services.Sercicesdao;
/**
* Servlet implementation class Xxx
*/
@WebServlet("/jsp/Xxx")
public class Xxx extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Xxx() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("application/json");
req.setCharacterEncoding("UTF-8");
resp.setCharacterEncoding("UTF-8");
Sercicesdao sc = new Sercicesdao();
List<Book> qa = sc.queryAll();
Object json = JSONObject.toJSON(qa);
resp.getWriter().print(json);
System.out.println("我执行了json");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
AJAX
简介
AJAX 是与浏览器与服务器交换数据的技术，它在不重载全部页面的情况下，实现了前后台数据交互，可以选择操作dom对页面进行更新
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本（text）、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
提示：如果没有 jQuery，AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能
常用属性参数
参 数 类 型 说 明 url String 发送请求的地址，默认为当前页地址 type String 请求方式，默认为GET data PlainObject或 String或Array 发送到服务器的数据 dataType String 预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text timeout Number 设置请求超时时间 global Boolean 表示是否触发全局Ajax事件，默认为true beforeSend function 发送请求前调用的函数 success function 请求成功后调用的函数参数result：可选，由服务器返回的数据 error function 请求失败时调用的函数 complete function 请求完成后（无论成功还是失败）调用的函数 contentType String 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。 async Boolean true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 $.ajax( { "url" : "url", // 要提交的URL路径 "type" : "get", // 发送请求的方式 "data" : data, // 要发送到服务器的数据 "dataType" : "text", // 指定传输的数据格式 "beforeSend": function() { 请求之前的方法 } "success" : function(result) { // 请求成功后要执行的代码 }, "error" : function() { // 请求失败后要执行的代码 } } ); var data ={}后台响应
使用ajax进行增删改查时get、post方法都能实现其功能。但是出于数据安全性的考虑，数据的添加和修改最好不要使用get方法。当数据量极大的时候，数据的获取也不建议采用get方法。get方法数据传输速度快但不能传大数据，传输不安全，post方法适用于传输大数据，传输速度比get较慢但安全性高。 如：当获取某个实体类集合的时候
举例
@WebServlet("/back/facebook/facebookmanage") public class FacebookManageServlet extends HttpServlet { IFacebookService facebookService = new FacebookServiceImpl(); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("text/html;charset=utf-8"); req.setCharacterEncoding("UTF-8"); resp.setCharacterEncoding("UTF-8"); String fid = req.getParameter("id"); int id = 0; if (!"".equals(fid)) id = Integer.parseInt(fid); int result = facebookService.deleteFacebook(id); resp.getWriter().print(result); } 注意
resp.setContentType中的值根据前台所要接收的对应的数据类型来填写，dataType是json类型则填写"application/json"，其他则为"text/html;charset=utf-8"。这是因为前后台的编码类型不一样所导致。
其实没有多大意义。success里的result接受到值之后，你可以把它转成json数据然后通过点的方式去获取数据
方法是：
JSON.parse(jsonstr); //可以将json字符串转换成json对象
JSON.stringify(jsonobj);//可以将json对象转换成json对符串
$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象
resp.getWriter().print()可以传对象
resp.getWriter().writer()只能传字符串
需要灵活运用
JSON
简介
JSON（JavaScript Object Notation） 一种轻量级的数据交换格式 采用独立于语言的文本格式 通常用于在客户端和服务器之间传递数据
优点
JSON的优点 轻量级交互语言 结构简单 易于解析
定义JSON对象
var person = { "name" : "张三", "age" : 30, "spouse" : null };定义JSON数组
var countryArray = [ "中国", "美国", "俄罗斯" ]; var personArray = [ { "name":"张三", "age":30 }, { "name":"李四", "age":40 } ];json 转换日期
function transferTime(cTime) { //将json串的一串数字进行解析
var jsonDate = new Date(parseInt(cTime));
// alert(jsonDate);
//为Date对象添加一个新属性，主要是将解析到的时间数据转换为我们熟悉的“yyyy-MM-dd hh:mm:ss”样式
Date.prototype.format = function(format) {
var o = {
//获得解析出来数据的相应信息，可参考js官方文档里面Date对象所具备的方法
"y+": this.getFullYear(), //得到对应的年信息
"M+": this.getMonth() + 1, //得到对应的月信息，得到的数字范围是0~11，所以要加一
"d+": this.getDate(), //得到对应的日信息
"h+": this.getHours(), //得到对应的小时信息
"m+": this.getMinutes(), //得到对应的分钟信息
"s+": this.getSeconds(), //得到对应的秒信息
}
//将年转换为完整的年形式
if(/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "") .substr(4 - RegExp.$1.length));
}
//连接得到的年月日 时分秒信息
for(var k in o) {
if(new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]) .substr(("" + o[k]).length));
}
}
return format;
}
var newDate = jsonDate.format("yyyy-MM-dd");
return newDate;
}
二 Jstl遍历
JSP页面 V层
<%@ 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>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
background: url(ac.jpg) top left;
background-size: 100%;
}
span {
color: red;
font-size: 30px;
}
#a {
font-size: 20px;
}
table {
/* 设置了这个属性，其余所有td都是相同的宽度。
这样操作之后，table是宽度固定了，但是里面的文章如果很长，文字会覆盖 */
table-layout: fixed;
}
td {
/* 自动换行就好了 */
/* word-wrap:break-word; */
width: 10px;
height: 11px
}
</style>
</head>
<body>
<div>
<!-- div width 100等于 左靠齐 -->
<div style="margin: 0px auto; width: 100%">
<div style="width: 100%; text-align: center">
<h1 style="color: blue">欢迎进入图书信息</h1>
</div>
<!-- width 1000等于表格宽度 -->
<table border="1px" cellspacing="0px" width="1700" height="150">
<tr>
<th colspan="6">学生信息</th>
</tr>
<tr>
<th>图书名称</th>
<th>图书作者</th>
<th>购买时间</th>
<th>图书分类</th>
<th>操作</th>
</tr>
<c:forEach var="list1" items="${books}">
<c:if test="${list1.id%2==0}">
<tr style="background-color: pink">
</c:if>
<c:if test="${list1.id%2!=0}">
<tr>
</c:if>
<td>${list1.name}</td>
<td>${list1.author}</td>
<td>${list1.timebuy}</td>
<td>${list1.typebook}</td>
<td><a id="btn" class="butc1"
href="${pageContext.request.contextPath}/jsp/DeleteServlet?qqq=${list1.id}">删除</a>（慎点数据会丢失）</td>
</tr>
</c:forEach>
</table>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(".butc1").click(function() {
var s = confirm("确认删除这本书吗")
//confrim 会让选择确定还是 取消
if (!s) {//如果是取消 返回false 加个！ 变成true
$(".butc1").attr({
"href" : "#"
});//获取a标签 href的属性 改成# 实现不跳转
}
//否则跳转执行删除
})
</script>
<%-- href="${pageContext.request.contextPath}/jsp/DeleteServlet?qqq=${list1.id}" --%>
<!-- <a id="btn1" class="butc" href="#">用户删除</a>（慎点 数据会丢失） <br> <br> -->
<form action="addbook.jsp" mehtod="get">
<input type="hidden" max="30" min="1" name="adds" value="1" /> <input
type="submit" value="新增图书信息" style="font-size: 20px"
style="font-size: 20px" />
</form>
<div style="margin: 0px auto; width: 20%">
<br> <br>
<form
action="${pageContext.request.contextPath}/jsp/Addbook2Servlet"
mehtod="get">
<h1>
随机新增2本书：<input type="hidden" max="30" min="1" name="adds"
value="1" /> <input type="submit" value="添加"
style="font-size: 20px" style="font-size: 20px" />
</h1>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Servlet 处理界面 C层
package webDemo05.kgc.Servletbook;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import webDemo05.kgc.pojo.Book;
import webDemo05.kgc.services.Sercicesdao;
/**
* Servlet implementation class LonginServlet
*/
@WebServlet("/jsp/LonginServlet")
public class LonginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public LonginServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
Sercicesdao sd = new Sercicesdao();
List<Book> qqq = sd.queryAll();
request.setAttribute("books", qqq);
request.getRequestDispatcher("books.jsp").forward(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
祝各位大佬前途似锦，身体健康！！！
扫一扫
2946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
