zoukankan      html  css  js  c++  java

  • ajax连接jsp或servlet,获取MySql为数据

     当然代码并没有严格按规范写。。。数据库连接和操作的代码应该单独写出来。。。 html 页面中的JS代码也应该单独写一个JS文件，然后引入页面即可。其次，jsp中的代码写到servlet中效果是一样的。。。

    1.html代码：

    Java代码  收藏代码
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.     <head>  
    4. <script type="text/javascript" src="">  
    5. var xmlHttp;  
    6.   
    7. //创建xmlHttpRequest对象  
    8. function createXmlHttpObject()   
    9. {  
    10.     if(window.XMLHttpRequest)   
    11.     {   
    12.         xmlHttp = new XMLHttpRequest();   
    13.     }else if(window.ActiveXObject)   
    14.     {   
    15.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
    16.     }   
    17.     return xmlHttp;  
    18. }  
    19.   
    20. function send()  
    21. {  
    22.     xmlHttp = createXmlHttpObject();  
    23.       
    24.     var url = "refreshAjax.jsp?time="+Math.random(); //加一个随机数，解决浏览器缓存问题      
    25.            
    26.     if(xmlHttp)  
    27.     {  
    28.         xmlHttp.onreadystatechange =callback;   //注册回调函数名,只需要函数名，不要加括号  
    29.         //设置连接信息：  
    30.         //第一个参数：表示http的请求方式，主要使用get和post  
    31.         //第二个参数：表示请求的URL地址，get方式的请求参数也在URL中  
    32.         //第三个参数：表示采用同步还是异步方式进行交互，true表示异步交互  
    33.         xmlHttp.open("GET", url, true);   
    34.           
    35.         //发送数据，开始和服务器端进行交互  
    36.         //同步方式下，send语句会在服务器端返回数据后才执行  
    37.         //异步方式下，send语句会立即执行  
    38.         xmlHttp.send(null);       
    39.     }else{  
    40.         alert("your browser does not support ajax");  
    41.         return;  
    42.     }      
    43. }  
    44.   
    45.   
    46.   
    47. //回调函数  
    48. function callback()   
    49. {   
    50.     //判断对象的状态是交互完成  
    51.     if(xmlHttp.readyState == 4)   
    52.     {  
    53.         //判断http的交互是否成功  
    54.         if(xmlHttp.status==200)  
    55.         {  
    56.             //获取服务器端返回的数据  
    57.             var xmlDoc = xmlHttp.responseXML;   
    58.               
    59.             document.getElementById("name").innerHTML = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;          
    60.             document.getElementById("tel").innerHTML = xmlDoc.getElementsByTagName("tel")[0].childNodes[0].nodeValue;  
    61.             document.getElementById("city").innerHTML = xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;          
    62.         }else{  
    63.             alert(xmlHttp.statusText);  
    64.         }  
    65.     }  
    66. }        
    67.   
    68. function refresh()  
    69. {  
    70.     window.setInterval("send()",1000); //定时刷新  
    71. }    
    72. </script>  
    73.     </head>  
    74.     <body onload="refresh()">  
    75.         <form action="">   
    76.             选择用户：   
    77.             <select name="employees" onchange="send(this.value);">  
    78.                 <option value="Tom">Tom</option>  
    79.                 <option value="Jom">Jom</option>  
    80.                 <option value="Sun">Sun</option>  
    81.             </select>  
    82.         </form>  
    83.   
    84.         用户名称：  
    85.         <span id="name"></span>  
    86.         <br>  
    87.         电话：  
    88.         <span id="tel"></span>  
    89.         <br>  
    90.         城市：  
    91.         <span id="city"></span>  
    92.         <br>  
    93.       
    94.     </body>  
    95. </html>  

    2。Jsp代码：

         连接的是MySql数据库。。。

    Java代码  收藏代码
    1. <%@ page language="java" import="java.sql.*" pageEncoding="gb2312"%>  
    2.   
    3. <%   
    4.     //这句至关重要，一定注意  
    5.     response.setContentType("text/xml;charset=gb2312");      
    6.       
    7.     StringBuffer str=new StringBuffer();  
    8.       
    9.         try {  
    10.             Class.forName("com.mysql.jdbc.Driver");  
    11.           
    12.             String url="jdbc:mysql://localhost:3306/devimonitor?";  
    13.             String userName="root";  
    14.             String password="root";  
    15.             Connection con=DriverManager.getConnection(url,userName,password);  
    16.           
    17.             Statement stmt=con.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);  
    18.               
    19.             String sql="select * from position order by id";  
    20.             ResultSet rs=stmt.executeQuery(sql);  
    21.               
    22.             if(rs.last())   
    23.             {  
    24.                 str.append("<information>");  
    25.                 str.append("<name>");str.append(rs.getString(1).trim());str.append("</name>");  
    26.                 str.append("<tel>");str.append(rs.getString(2).trim());str.append("</tel>");  
    27.                 str.append("<city>");str.append(rs.getString(3).trim());str.append("</city>");  
    28.                 str.append("</information>");  
    29.             }  
    30.             stmt.close();  
    31.             con.close();  
    32.             rs.close();  
    33.         } catch (Exception e)   
    34.         {  
    35.             e.printStackTrace();  
    36.         }  
    37.     
    38.     out.print(str.toString());  
    39. %>  
  • 相关阅读:
    Vue 下拉刷新及无限加载组件
    VUE常用问题hack修改
    CSS滤镜让图片模糊（毛玻璃效果）实例页面
    滑动删除
    拖动选择单元格并合并方法
    Windows7上开启ftp服务器功能
    js 向上滚屏
    理解Clip Path
    图标制作
    transition实现图片轮播
  • 原文地址：https://www.cnblogs.com/-ksz/p/3322688.html
Copyright © 2011-2022 走看看