json+ajax实现实时刷新和增删查功能

来源：互联网发布：绘制网络计划图软件编辑：程序博客网时间：2024/06/03 19:02

首先，在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>

1 0