前幾天學院里一個老鄉問我能不能幫她做一個在線答題的小系統，他提的需求很簡單：
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(); } }