前几天学院里一个老乡问我能不能帮她做一个在线答题的小系统，他提的需求很简单：
1.web网站
2.系统可以出题展现给用户
3.用户可以答题
4.系统给出答案判定
回去后她又把具体的资料给我发了一份，自己想了一想这不正好可以用上自己最近在学的ajax吗。
于是满口答应了着手开发。
成果截图：
系统脉络：
（1）用户进入系统后点击相应章节打开后选择题型
（2）点击后将章节和题型作为参数传递给chuti.jsp
（3）chuti.jsp 根据传来的参数到数据库中查询相应数据来初始化页面内容
（4）用户输入答案点击提交按钮时，该页面向服务器端的check.java发送post请求并传递答案和题目信息
（5）check.java完成答案校验并把结果返回给chuti.jsp
(6)用户点击下一题时chuti.jsp发送请求给服务器端的search.java传递当前题目的基本信息
(7)search.java根据接收到的当前题目信息去数据库中查找该题目的下一题并把结果返回给chuti.jsp显示
源代码：
（1）客户端（chuti.jsp）：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@page import="java.sql.*" %> <jsp:useBean id="database" class="com.lhp.unit.DBBean" scope="page" /> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <%!String zhangjie=null; String tixing=null; String BiaozhunAnswer=null; String userAnswer=null; String Timu=null; String id=null; %> <% request.setCharacterEncoding("utf-8"); zhangjie=request.getParameter("zhangjie"); tixing=request.getParameter("tixing"); try{ //System.out.println(tixing); String sql="select * from "+tixing+" where deffnum="+zhangjie+" and id=1"; ResultSet rs=database.executeQuery(sql); if(rs.next()) { Timu=rs.getString("name"); id=rs.getString("id"); } else{Timu="题库里已经没有没做过的题目了，同学再试试别的类型的题目吧。"; } } catch(Exception e) { System.out.println(e.getMessage()); } %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>出题页</title> <link rel="stylesheet" type="text/css" href="button2.css"> <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="js/jquery-1.7.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.js"></script> <script type="text/javascript"> $(function(){ $('#next').click(function (){ var zj=document.getElementById("zj").value; var tx=document.getElementById("tx").value; var id=document.getElementById("id").value; document.getElementById('answer').value =null; var url="com.lhp.servlet.Search"; var datas={"zj":zj,"tx":tx,"id":id}; //alert(url); $.getJSON(url,datas,function(data){ document.getElementById('textti').value =data.timu; document.getElementById('id').value =data.id; //alert(data.id); }); return false; }); }) /* jQuery(function($){ var zj=document.getElementById("zj").value; var tx=document.getElementById("tx").value; var id=document.getElementById("id").value; $('#next').click(function () { $.ajax({ type:"POST", url:"com.lhp.servlet.Search", async:false, dataType: "text", scriptCharset:'UTF-8', data:{"zj":zj,"tx":tx,"id":id}, success:function(name) { document.getElementById('textti').value =name; } } ); }); }); */ </script> <script type="text/javascript"> jQuery(function($){ //var answer=document.getElementById("answer").value; //$("#answer").text().val(); $('#submit').click(function () { var tixing=document.getElementById("tx").value; var id=document.getElementById("id").value; var answer=document.getElementById("answer").value; if(answer=="") { alert("请输入答案后再进行提交！"); return; } $.ajax({ type:"POST", url:"com.lhp.servlet.Check", async:false, dataType: "text", scriptCharset:'UTF-8', data:{"answer":answer,"tx":tixing,"id":id}, success:function(result) { //$("#box").text(result); alert(result+"点击确认继续！"); } } ); }); }); </script> </head> <body> <input type="hidden" id="zj" value=<%=zhangjie%>> <input type="hidden" id="tx" value=<%=tixing%>> <input type="hidden" id="id" name="id" value=<%=id%>> <p><h3>题目</h3> <table width="95%" height="150" border="1" align="center"> <tr> <td height="150" width="100%"><div align="center"><textarea id="textti" cols="50" rows="4" class="comments" style=height:150px readonly="readonly"><%=Timu%></textarea> </div></td> </tr> </table> <p> <h3>请您在该区域内作答：</h3> <table width="95%" height="150" border="1" align="center"> <tr> <td height="100" width="100%"><div align="center"><textarea id="answer" name="answer" cols="50" rows="4" class="comments" style=height:150px></textarea> </div></td> </tr> <tr> <td> <button name="submit" id="submit" class="button button-raised button-royal" >确认并提交</button> <button name="next" id="next" class="button button-raised" >下一道题</button> </td> </tr> </table> <div id="box"> </div> </body> </html>
服务器端：
check.java:
package com.liying.servlet; import java.io.IOException; import java.io.PrintWriter; import java.sql.ResultSet; import java.sql.SQLException; import javax.jms.Session; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import com.sun.org.apache.commons.digester.rss.Image; import com.sun.org.apache.xalan.internal.xsltc.compiler.Parser; public class Check extends HttpServlet { private static final long serialVersionUID = 6662372955453450455L; public void doGet(HttpServletRequest request , HttpServletResponse response ) throws ServletException , IOException { response.setCharacterEncoding("UTF-8"); String tx=request.getParameter("tx"); String answer=request.getParameter("answer"); String id=request.getParameter("id"); System.out.println("XXXXXXXXX"+tx+answer); String sql="select * from "+tx+" where id="+id+""; System.out.println(sql); String code="没有题目，无法判断结果"; String rightanswer=null; com.lhp.unit.DBBean db = new com.lhp.unit.DBBean(); ResultSet rs = db.executeQuery(sql); try { while(rs.next()) { //code=rs.getString("name"); rightanswer=rs.getString("answer"); System.out.println(rightanswer); if(answer.trim().equals(rightanswer)) { code="恭喜你答对了！"; } else { code="很遗憾，答案错误!正确答案为"+rightanswer; } } } catch (SQLException e) { e.printStackTrace(); } response.getWriter().print(code); db.close(); } public void doPost(HttpServletRequest request , HttpServletResponse response ) throws ServletException , IOException { doGet(request, response); } }
search.java:
package com.liying.servlet; import com.lhp.unit.Return; import java.io.IOException; import java.io.PrintWriter; import java.sql.ResultSet; import java.sql.SQLException; import javax.jms.Session; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.codehaus.jackson.map.ObjectMapper; public class Search extends HttpServlet { private static final long serialVersionUID = -7750830536397709752L; public Search()//构造函数 { super(); } public void doGet(HttpServletRequest request , HttpServletResponse response ) throws ServletException , IOException { doPost(request, response); } public void doPost(HttpServletRequest request , HttpServletResponse response ) throws ServletException , IOException { response.setCharacterEncoding("UTF-8"); String tx=request.getParameter("tx"); String zj=request.getParameter("zj"); String id=request.getParameter("id"); //System.out.println(tx+zj+id); int id2=Integer.parseInt(id); int id3=id2+1; System.out.println(id3); HttpSession session=request.getSession(); System.out.println("XXXXXXXXX"+tx+zj); String sql="select * from "+tx+" where deffnum="+zj+" and id='"+id3+"' "; System.out.println(sql); String timu="暂无数据"; com.lhp.unit.DBBean db = new com.lhp.unit.DBBean(); ResultSet rs = db.executeQuery(sql); try { if(rs.next()) { timu=rs.getString("name"); //session.setAttribute("id", rs.getInt("id")); } } catch (SQLException e) { e.printStackTrace(); } StringBuilder result =new StringBuilder(); //拼接json字符串（其中""为转移字符）： result.append("{"); result.append(""timu":""+timu+"""); result.append(","); result.append(""id":""+id3+"""); result.append("}"); System.out.println(result.toString()); // Return result = new Return(timu, id3); // ObjectMapper mapper = new ObjectMapper(); // System.out.println(mapper.writeValueAsString(result)); response.setContentType("text/javascript"); response.getWriter().print(result.toString()); db.close(); } }