ajax+jsp异步无刷新从DB取数据

最新推荐文章于 2024-09-13 15:19:32 发布

itchuxuezhe_yang

最新推荐文章于 2024-09-13 15:19:32 发布

阅读量594

点赞数

分类专栏：前端及网络文章标签： web表单 ajax javascript

前端及网络专栏收录该内容

9 篇文章 0 订阅

订阅专栏

ajax+jsp异步无刷新从DB取数据

(2012-03-02 22:23:12)

转载▼

标签：

杂谈

分类：JAVA

ajax+jsp异步无刷新从DB取数据

ajax应用的基本流程
1 从web表单中获取需要的数据
2 建立到服务器的url
3 打开到服务器的连接
4 设置服务器在完成后要运行的函数
5 发送请求
ajax.html

<html>
<head>
<scriptsrc="selectcustomer.js"></script>
</head>
<formname="form">
select acustomer
<select name="customers"οnchange="showCustomer(document.form.customers.options[document.form.customers.selectedIndex].text)">
<optionvalue="1">000100</option>
<optionvalue="2">000101</option>
<optionvalue="3">000102</option>
</select>
</form>
<p>
<divid="txtHint"><b>Customerinfo will be listedhere.</b></div>
</p>
</html>

selectcustomer.js
var xmlHttp;
function showCustomer(str)
{
xmlHttp=GetXmlHttpObject();
if(xmlHttp==null)
{
alert("Browser does notsupport HTTP Request");
return ;
}
var url="ajax.jsp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if(xmlHttp.readyState==4||xmlHttp.readyState=="complete")
{
document.getElementByIdx_x("txtHint").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null;
if(window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
objXMLHttp=newActiveXObject("Microsoft.XMLHTTP");
}
return objXMLHttp;
}

ajax.jsp

< %@pagecontentType="text/html; charset=gb2312"import="java.sql.*"%>
<html>
<body>
<%
Stringsql=(String)request.getParameter("q");
//out.println(q);
String str="select * fromcustomers where customerid='"+sql+"'";
//String str1="select * fromcustomers";
Class.forName("org.gjt.mm.mysql.Driver").newInstance();
Connectioncon=java.sql.DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","");
Statementstmt=con.createStatement();
ResultSetrst=stmt.executeQuery(str);
%>
<table>
<%
while(rst.next())
{
%>
<tr>
<td><%=rst.getString("customerid")%></td>
<td><%=rst.getString("customername")%></td>
<td><%=rst.getString("companyname")%></td>
<td><%=rst.getString("contactname")%></td>
<td><%=rst.getString("address")%></td>
<td><%=rst.getString("postalcode")%></td>
</tr>
<% }
//关闭连接、释放资源
rst.close();
stmt.close();
con.close();
%>
</table>
</body>
</html>