Chinaunix首页 | 论坛 | 博客

Natural windj2ee.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

soakcpp

  • 博客访问： 382174
  • 博文数量： 80
  • 博客积分： 2682
  • 博客等级： 少校
  • 技术积分： 907
  • 用 户 组： 普通用户
  • 注册时间： 2012-03-16 09:55
文章分类

全部博文（80）

文章存档

2012年（80）

我的朋友
最近访客
推荐博文
相关博文
Ajax 把表单数据以xml文件格式传给服务端

分类： 系统运维

2012-07-17 14:03:13

把页面上select控件上选中的值传给服务端得servlet。

postingXML.html.html的代码如下

点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6.   
  7.     <script type="text/javascript">
  8.         var xmlHttp ;
  9.         function createXMLHttpRequest(){
  10.             if(window.ActiveXObject){
  11.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  12.             } else if(window.XMLHttpRequest){
  13.                 xmlHttp = new XMLHttpRequest();
  14.             }
  15.         }
  16.            
  17.         function sendXML(){
  18.             createXMLHttpRequest();
  19.             var url = "PostExamplePets?timeStamp="+ new Date().getTime();
  20.             xmlHttp.open("Post",url,true);
  21.             xmlHttp.onreadystatechange= handleStateChange;
  22.             xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
  23.             var xmlPets = getClientPets();
  24.             xmlHttp.send(xmlPets);
  25.                
  26.         }
  27.            
  28.         function getClientPets(){
  29.             var xmlPets ="";
  30.                
  31.             var option = document.getElementById("petTypes");
  32.             if (option) {
  33.                 for (var i = 0 ; i < option.length; i++) {
  34.                     if(option[i].selected) {
  35.                         xmlPetsxmlPets= xmlPets +"" +option[i].value+"<\/type>";
  36.                     }
  37.                        
  38.                 }
  39.             }
  40.                
  41.             xmlPetsxmlPets= xmlPets +"<\/pets>";
  42.                
  43.             return xmlPets;
  44.                
  45.         }
  46.            
  47.            
  48.         function doRequestUsingGET(){
  49.             createXMLHttpRequest();
  50.             var queryString = "GetAndPostExample?";
  51.             queryStringqueryString = queryString + createQueryString()+
  52.             "×tamp="+ new Date().getTime();
  53.             xmlHttp.onreadystatechange = handleStateChange;
  54.             xmlHttp.open("GET",queryString,true);
  55.             xmlHttp.send(null);
  56.         }
  57.            
  58.         function doRequestUsingPOST(){
  59.             createXMLHttpRequest();
  60.             var url = "GetAndPostExamplePets?timestampe=" + new Date().getTime();
  61.             xmlHttp.open("POST",url,true);
  62.             xmlHttp.onreadystatechange = handleStateChange;
  63.             xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
  64.                
  65.             var queryString = createQueryString();
  66.             xmlHttp.send(queryString);
  67.         }
  68.            
  69.         function handleStateChange(){
  70.             if(xmlHttp.readyState == 4){
  71.                 if(xmlHttp.status == 200) {
  72.                     parseResults();
  73.                 }
  74.             }
  75.         }
  76.            
  77.         function parseResults(){
  78.            
  79.             var responseDiv = document.getElementById("serverResponse");
  80.             if (responseDiv.hasChildNodes()){
  81.                 responseDiv.removeChild(responseDiv.childNodes[0]);
  82.             }
  83.                
  84.             var responseText = document.createTextNode(xmlHttp.responseText);
  85.             responseDiv.appendChild(responseText);
  86.         }
  87.     </script>
  88. </head>
  89. <body>
  90.            
  91.     <form action="#">
  92.         <h1>please select the pets type in your home:</h1><br/>
  93.         <select id="petTypes" size="6" multiple="true">
  94.             <option value="dog">dog</option>
  95.             <option value="bird">bird</option>
  96.             <option value="pig">pig</option>
  97.             <option value="duck">duck</option>
  98.             <option value="rabbit">rabbit</option>
  99.             <option value="wugui">乌龟</option>
  100.         </select>
  101.         <br/><br/>
  102.                
  103.         <input type="button" value="submit the pets" onclick="sendXML();"><br/><br/>
  104.     </form>
  105.        
  106.     <h2>server response:</h2>
  107.         <div id="serverResponse">
  108.         </div>
  109. </body>
  110. </html>

处理客户端请求的java代码PostExamplePets.java

点击(此处)折叠或打开

  1. package ajaxbook.chap3;
  2.   
  3. import java.io.BufferedReader;
  4. import java.io.ByteArrayInputStream;
  5. import java.io.IOException;
  6.   
  7. import javax.servlet.ServletException;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11. import javax.xml.parsers.DocumentBuilderFactory;
  12. import javax.xml.parsers.ParserConfigurationException;
  13.   
  14. import org.w3c.dom.Document;
  15. import org.w3c.dom.NodeList;
  16. import org.xml.sax.SAXException;
  17.   
  18. public class PostExamplePets extends HttpServlet{
  19.        
  20.   
  21.     @Override
  22.     protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
  23.         // TODO Auto-generated method stub
  24.     }
  25.   
  26.     @Override
  27.     protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
  28.         String result = this.getRequestPets(req);
  29.         Document xmlDoc = null;
  30.            
  31.         try {
  32.                
  33.             xmlDoc = DocumentBuilderFactory.newInstance().newDocumentBuilder().
  34.                 parse(new ByteArrayInputStream(result.getBytes()));
  35.                
  36.                
  37.         } catch (SAXException e) {
  38.             e.printStackTrace();
  39.         } catch (ParserConfigurationException e) {
  40.             e.printStackTrace();
  41.         }
  42.            
  43.         NodeList selectedPetsType = xmlDoc.getElementsByTagName("type");
  44.         StringBuilder sb = new StringBuilder("selected pet type are : ");
  45.            
  46.         for (int i = 0 ; i < selectedPetsType.getLength() ;i ++ ){
  47.             sb.append(selectedPetsType.item(i).getFirstChild().getNodeValue()).append(" ");
  48.         }
  49.            
  50.         res.setContentType("text/xml");
  51.         res.getWriter().print(sb.toString());
  52.     }
  53.        
  54.     private String getRequestPets(HttpServletRequest req) {
  55.            
  56.         StringBuilder sb = new StringBuilder();
  57.         BufferedReader bufferedReader = null;
  58.         try {
  59.             bufferedReader = req.getReader();
  60.             String line ;
  61.             while((line=bufferedReader.readLine()) != null) {
  62.                 sb.append(line);
  63.             }
  64.         }
  65.         catch (IOException e) {
  66.             e.printStackTrace();
  67.         } finally{
  68.             try {
  69.                 bufferedReader.close();
  70.             } catch (IOException e) {
  71.                 e.printStackTrace();
  72.             }
  73.         }
  74.         return sb.toString();
  75.     }
  76.        
  77. }



阅读(917) | 评论(0) | 转发(0) |
0

上一篇：Jquery ajax执行顺序 返回自定义错误信息

下一篇：JS & JQuery 动态添加 option

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6