html ajax如何改成jsp,Ajax+jsp实现动态修改表单

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

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

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

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

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

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

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

login.jsp

%@ page language="java" import="java.util.*" contentType="text/html;charset=utf-8"%>

My JSP 'index.jsp' starting page

window.οnlοad=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

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);

}

}

check.jsp

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>list=new ArrayList>();

while(rs.next()){

Map map=new HashMap();

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();

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