`
jdw
  • 浏览: 158895 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类：
  • java
AjaxJSPMySQLSQL应用服务器
阅读更多

ajax应用的基本流程

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

ajax.html

<html>
  <head>
 <script src="selectcustomer.js"></script>
  </head>
  <form name="form">
    select a customer
 <select name="customers" onchange="showCustomer(document.form.customers.options[document.form.customers.selectedIndex].text)">
    <option value="1">000100</option>
    <option value="2">000101</option>
    <option value="3">000102</option>
 </select>
  </form>
  <p>
  <div id="txtHint"><b>Customer info will be listed here.</b></div>
  </p>
</html>

 selectcustomer.js

var xmlHttp;
function showCustomer(str)
{
  xmlHttp=GetXmlHttpObject();
  if(xmlHttp==null)
  {
   alert("Browser does not support 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.getElementById("txtHint").innerHTML=xmlHttp.responseText;
 }
}
function GetXmlHttpObject()
{
 var objXMLHttp=null;
 if(window.XMLHttpRequest)
 {
  objXMLHttp=new XMLHttpRequest();
 }
 else if(window.ActiveXObject)
 {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 return objXMLHttp;
}

 ajax.jsp 

<%@page contentType="text/html; charset=gb2312" import="java.sql.*"%>
<html>
<body>
<%
   String sql=(String)request.getParameter("q");
    //out.println(q);
   String str="select * from customers where customerid='"+sql+"'";
   //String str1="select * from customers";
   Class.forName("org.gjt.mm.mysql.Driver").newInstance();
   Connection con=java.sql.DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","");
   Statement stmt=con.createStatement();
    ResultSet rst=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>

 

 

分享到：
| DIV随滚动条移动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics