json+ajax实现实时刷新和增删查功能
浏览数：33 /
时间：2015年06月09日
首先，在servlet里面我是这样处理的：
package com.wws.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import com.wws.model.CourseBeanBO;
import com.wws.model.SCBeanBO;
import com.wws.model.UsersBean;
public class ShowSC extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter pw=response.getWriter();
//int user_id=Integer.parseInt(request.getAttribute("user_id").toString());
String type=request.getParameter("type");
if("read".equals(type))
{ int user_id=((UsersBean)request.getSession().getAttribute("userInfo")).getUser_id();
SCBeanBO sbb=new SCBeanBO();
JSONArray ja=sbb.getCourse_list(user_id);
pw.println(ja);
pw.flush();
pw.close();
}
else
{
String cccc=request.getParameter("course_id");
int course_id=Integer.parseInt(request.getParameter("course_id"));
int user_id=((UsersBean)request.getSession().getAttribute("userInfo")).getUser_id();
SCBeanBO sbb=new SCBeanBO();
sbb.removeSC(user_id, course_id);
JSONArray ja=sbb.getCourse_list(user_id);
pw.println(ja);
pw.flush();
pw.close();
}
//response.sendRedirect("person3.jsp");
//request.setAttribute("SC_list1", al1);
//request.getRequestDispatcher("person3.jsp").forward(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
用：
JSONArray ja=sbb.getCourse_list(user_id); pw.println(ja); pw.flush(); pw.close();把获取的课程信息转化为jsonArray.
接着前台是这么处理的：（person3.jsp)
<%@ page language="java" import="java.util.*,com.wws.model.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
SCBeanBO sbb=new SCBeanBO();
ArrayList al2=(ArrayList)request.getAttribute("SC_list1");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>学生个人中心</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="jq/jquery-2.1.1.js"></script>
<link rel="stylesheet" type="text/css" href="css/person3.css">
<script type="text/javascript">
/**
*ajax读取页面，删除操作
*/
$(document).ready(function(){
//对象序列化
var formdata = $("#ff").serialize();
$.ajax({
url:"ShowSC?type=read",
type:"post",
data:formdata,
dataType:"json",
success:function(data)
{
/* function callBack(course_id)
{
if(confirm("你确定要删除吗？"))
{
$.open("get","ShowSC?course_id="+course_id,true);
}
}; */
//console.log(data);
var str="";
//console.log(jsonStr);
var json = eval( data );
$.each(json, function (index) {
//循环获取数据
var course_id = json[index].course_id;
var course_name = json[index].course_name;
//str+="<tr><td>"+course_id+"</td><td>"+course_name+"</td><td><a href='ShowCl?type=del&course_id="+course_id+"'>删除</a></td></tr>";
str+="<tr><td>"+course_id+"</td><td>"+course_name+"</td><td><button id='btn' onclick='callBack("+course_id+")'>删除</button></td></tr>";
//str+="<tr><td>"+course_id+"</td><td>"+course_name+"</td><td><a href='javascript:function("+course_id+")'>删除</button></td></tr>";
});
console.log(str);
$("tbody").html(str);
//$("#btn").click(function(2){
/* $("btn").bind("click",function (course_id)
{
alert("12345678");
$.ajax({
type: "get",
url: "ShowSC?course_id="+course_id,
data: setQueryString(),
success: function(){
alert("成功了");
},
error: function(){
alert("怎么出错了呢");
}
});
}); */
},
error:function()
{
//出错后可以在这里给出提示，Error参数表示错误信息
alert("出错了");
}
});
});
function callBack(course_id)
{
if(confirm("你确定要删除吗？"))
{
var formdata = $("#ff").serialize();
//$.open("post","ShowSC?course_id="+course_id,true);
$.ajax({
type: "post",
url: "ShowSC?type=del&course_id="+course_id,
data: formdata,
dataType:"json",
success: function(){
alert("删除成功！");
location.reload(true);
},
error: function(){
alert("怎么出错了呢");
}
});
}
};
</script>
</head>
<body>
<jsp:include page="header.jsp"></jsp:include>
<div class="sc_table" >
<table class="" id="ff">
<thead>
<tr>
<td>课程编号</td>
<td>课程名称</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<!--
for(int i=0;i<al2.size();i++){
int sc_id=(Integer)al2.get(i);
CourseBean cb=(CourseBean)sbb.getCourseinfo(sc_id);
-->
<%-- <tr>
<td ><%=cb.getCourse_id() %></td>
<td ><%=cb.getCourse_name() %></td>
<td><a href="delSC?sc=<%=sc_id %>>">删除</a></td>
</tr>
--%>
<!-- }-->
</tbody>
</table>
<span id="msg" style="color:red"></span>
</div>
<jsp:include page="tail.jsp"></jsp:include>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
