Ajax+jsp实现动态修改表格

来源：互联网发布：围巾知乎男士编辑：程序博客网时间：2024/05/18 02:35

ajax最大特点就是在页面不刷新的前提下实现页面内容的变换。

举个很常见的例子：比如有一个排行榜，这个排行榜肯定是随时变化的，我们希望用户不需要刷新页面的情况下就可以看到实时表格。（游戏排行榜，oj提交列表）

为了实现这个功能，我们需要掌握以下技术:ajax向后台提出请求(每隔很短的时间）------>jsp获取请求并查询数据库----->返回json格式数据----->js解析json格式数据并dom操作节点修改表单内容

流程:首先是编写触发函数（设置计时器或者点击事件），在触发函数中实现ajax的创建，然后实现ajax的回调函数，根据回调函数的内容进行相应的操作。

比如常见邮箱合理性验证可以在客户端实现，但是如果涉及到用户名是否使用过之类的，就必须要先启用ajax到服务端，在获取到返回的字符串后（比如该用户未被注册，或者该用户已被注册），通过dom操作打印到该页面（***.innerHTML= )(***** .style.display="block"）

如果想要动态修改表单,除了触发事件不一样（合理性验证一般当失去焦点的时候，而像排行榜之类的就是每隔多少秒获取），还要在后台返回json格式的数据，客户端通过eval解析（注意两边要加上（）），

这边需要在lib文件夹下导入jsonarray和mysql的包,这里只有学生id和姓名两列。

%@ page language="java" import="java.util.*" contentType="text/html;charset=utf-8"%><html>  <head>   <title>My JSP 'index.jsp' starting page</title>   <script>    window.onload=function(){     setInterval("change()",50);    }   function change(){    var i=Math.random();//目的是使页面不一样      createRequest('check.jsp?id='+i);   }   function createRequest(url){//初始化XMLHttpRequest对象   http_request=false;   if (window.XMLHttpRequest){   http_request=new XMLHttpRequest();   }else if (window.ActiveXObject){   try{   http_request=new ActiveXObject("Msxml2.XMLHTTP");   }catch(e){   try{   http_request=new ActiveXObject("Microsoft.XMLHTTP");   }catch(e){}   }  }   if (!http_request){   alert("不能创建XMLHTTPRequest对象");   return false;   }   http_request.onreadystatechange=getResult;//这边指定一旦接受到返回值就提交到getResult处理   http_request.open('GET',url,true);   http_request.send(null);  }   function getResult(){   if (http_request.readyState==4){   if (http_request.status==200){    var result=http_request.responseText;//获取到json数据    var json=eval("("+result+")");//解析json数据    setContent(json);//进行DOM操作   }   else   {   alert("您所请求的页面有错误");   }   }   }    function setContent(contents){//将json数据解析并输出到页面上    var size=contents.length;    var p=document.getElementById("content_table_body").parentNode;//先将之前的删除    p.removeChild(document.getElementById("content_table_body"));    var c=document.createElement("tbody");    c.setAttribute("id","content_table_body");    p.appendChild(c);    for (var i=0;i<size;i++){   var nextNode=contents[i].id;//代表的是json格式数据的第i个元素的id   var nextNode2=contents[i].student_name;//第i个元素的姓名   var tr=document.createElement("tr");   var td=document.createElement("td");   var text=document.createTextNode(nextNode);   var td2=document.createElement("td");   var text2=document.createTextNode(nextNode2);   td2.appendChild(text2);   tr.append(td2);   td.appendChild(text);   tr.appendChild(td);   document.getElementById("content_table_body").appendChild(tr);   }   }  </script>  </head>   <body>   <table id="content_table" bg color="#FFFAFA" border="1">   <tbody id="content_table_body"><!-- 动态查询的数据显示的数据 对tbody进行操作-->    </tbody>   </table>  </body></html>

check.jsp

<%@page import="net.sf.json.JSONArray"%><%@ page language="java" import="java.util.*" contentType="text/html;charset=utf-8"%>  <%@ page import="java.sql.*"%><%    String driver = "com.mysql.jdbc.Driver";        String url = "jdbc:mysql://127.0.0.1:3306/ajax";        String use = "root";         String password = "960404";        Class.forName(driver);        Connection conn= DriverManager.getConnection(url,use,password);        PreparedStatement sql =conn.prepareStatement("select * from ajax_check");    ResultSet rs=sql.executeQuery();    List<Map<String,String>>list=new ArrayList<Map<String,String>>();    while(rs.next()){    Map<String,String> map=new HashMap<String,String>();    map.put("id",rs.getString("student_id"));    map.put("student_name",rs.getString("student_name"));    list.add(map);    }    out.println(JSONArray.fromObject(list).toString());    System.out.println(list);    rs.close();    conn.close();%>

这样就可以边修改数据库内容，边观察到页面的变化了，当然你也可以再写个增删查改，然后看页面实时变化。

0 0