黑夜里的狼
posts - 64,comments - 22,trackbacks - 0
jquery Ajax 提交
鉴于项目需要，开始边看Demo边使用JQuery。现将项目中暂时遇到的三种使用JQuery进行Ajax提交的方式做个总结。因为没有系统学习，有点山寨，只求在项目中实现功能。
    1.URL+GET参数提交
       这种方式是最普遍的，只要包含jquery.js就可以正常使用。
     
Java代码  收藏代码
  1. $.ajax({  
  2.     type: "get",  
  3.     url: "/openshop/control/getCustomerAddress",  
  4.     data:"customerId="+$.trim($("#customerId")[0].value),  
  5.     cache: false,  
  6.     success: function(msg){  
  7.           $("#addressInfo")[0].innerHTML = msg;  
  8.           showTipWindow(newid,oldid,0,e);  
  9.     }  
  10. });   
  11.      


    2.整个form的提交
        如果不使用JQuery的form ajax提交，则必须手动组装所有的表单元素键值对。现在使用JQuery的一个插件：jquery.form.js。将jquery.js，jquery.form.js文件都包含到项目中。然后使用如下代码：
      
Java代码  收藏代码
  1. $('#'+newid+'_frmNewAddr').ajaxForm({ beforeSubmit: validate ,success: showResponse});  
  2.   
  3. ....  
  4.   
  5. function validate(formData, jqForm, options){  
  6.     var form = jqForm[0];   
  7.     if (!form.new_recipient.value ) {   
  8.         alert('收件人必须填写！');   
  9.         return false;   
  10.     }   
  11.     if (!form.new_address.value ) {   
  12.         alert('收件地址必须填写！');   
  13.         return false;   
  14.     }   
  15.   
  16.    ....  
  17.   
  18.    return true;   
  19. }  
  20.   
  21. function showResponse(responseText, statusText, xhr, $form){  
  22.     var address = eval("("+removeDivTag(responseText)+")");   
  23.     $("#address_recipient")[0].innerHTML = address.recipient;  
  24.     $("#address_address")[0].innerHTML = address.address;  
  25.     $("#address_organization")[0].innerHTML = address.organization;  
  26.          ......  
  27. }  
  28.          

      其中$('#'+newid+'_frmNewAddr')获取表单对象，其中beforeSubmit对应的validate()是一个表单提交前调用 的方法，可以在此方法中做表单验证，只有该方法返回true，表单才会提交。而success对应的showResponse则是ajax对象成功返回后 的回调方法，可以将回调得到的内容无刷新呈现到当前页面的相应区域中。较方便的做法是在服务器端以JSON格式返回数据，然后在回调函数中使用 eval("("+removeDivTag(responseText)+")")方法获取具有指定结构的js对象。

     3.使用JQuery做文件上传的ajax提交
     本人寻找并比较了多种ajax或类ajax方式上传文件的做法,譬如使用iframe等。最终觉得使用JQuery是最方便的，不知各位使用后是否与我有 同感。我将我目前的做法总结如下，首先须在项目中包含jquery.js，ajaxfileupload.js，ajaxfileupload.css。
Java代码  收藏代码
  1. <script type="text/javascript">  
  2. function ajaxFileUpload(imgName)  
  3. {  
  4.     $("#loading")  
  5.     .ajaxStart(function(){  
  6.         $(this).show();  
  7.     })  
  8.     .ajaxComplete(function(){  
  9.         $(this).hide();  
  10.     });  
  11.   
  12.     $.ajaxFileUpload  
  13.     (  
  14.         {  
  15.             url:'/productmgr/control/uploadProductImg',  
  16.             secureuri:false,  
  17.             fileElementId: imgName+'File',  
  18.             dataType: 'text',  
  19.             success: function (data, status)  
  20.             {  
  21.                 data = removeDivTag(data);  
  22.                 if(data=="ImgEmptyErr"){  
  23.                     alert("请选择上传图片！");  
  24.                     return;  
  25.                 }  
  26.                 if(data=="sysErr"){  
  27.                     alert("上传失败，请重试！");  
  28.                     return;  
  29.                 }  
  30.                 $("#"+imgName)[0].value = data;  
  31.                 $("#"+imgName+"Div")[0].innerHTML = "上传成功！"  
  32.                 //alert($("#"+imgName)[0].value);  
  33.             },  
  34.             error: function (data, status, e)  
  35.             {  
  36.                 alert("添加产品图片时发生如下错误："+e);  
  37.             }  
  38.         }  
  39.     )     
  40.     return false;  
  41.   
  42. }  
  43. </script>  

      本人服务器端使用的是beanshell脚本，代码如下：
Java代码  收藏代码
  1. /* 
  2.  * 产品图片上传 
  3.  *  
  4.  * author : Emerson 
  5.  * 
  6.  * Yiihee , Inc. */  
  7.   
  8.   
  9. import org.ofbiz.base.util.*;  
  10. import org.ofbiz.base.util.string.*;  
  11. import org.ofbiz.entity.*;  
  12. import java.text.SimpleDateFormat;  
  13. import java.util.*;  
  14. import java.io.*;  
  15. import org.apache.commons.fileupload.disk.*;  
  16. import org.apache.commons.fileupload.servlet.*;  
  17. import org.apache.commons.fileupload.*;  
  18.   
  19.   
  20.     configProperties = UtilProperties.getProperties("opencommon.properties");  
  21.     String imageUploadServerPath = configProperties.get("openb2c.image.upload.server.path");  
  22.   
  23.     //SimpleDateFormat sf = new SimpleDateFormat("yyyyMMddHHmmss");     
  24.     //Date date = new Date();     
  25.     //String filename = sf.format(date);  
  26.     String fileName;  
  27.   
  28.     File uploadPath = new File(imageUploadServerPath);//上传文件目录  
  29.     if (!uploadPath.exists()) {  
  30.        uploadPath.mkdirs();  
  31.     }  
  32.     // 临时文件目录  
  33.     File tempPathFile = new File(imageUploadServerPath+"\\temp\\");  
  34.     if (!tempPathFile.exists()) {  
  35.        tempPathFile.mkdirs();  
  36.     }  
  37.     try {  
  38.        // Create a factory for disk-based file items  
  39.        DiskFileItemFactory factory = new DiskFileItemFactory();  
  40.    
  41.        // Set factory constraints  
  42.        factory.setSizeThreshold(4096); // 设置缓冲区大小，这里是4kb  
  43.        factory.setRepository(tempPathFile);//设置缓冲区目录  
  44.    
  45.        // Create a new file upload handler  
  46.        ServletFileUpload upload = new ServletFileUpload(factory);  
  47.    
  48.        // Set overall request size constraint  
  49.        upload.setSizeMax(4194304); // 设置最大文件尺寸，这里是4MB  
  50.    
  51.        List items = null;  
  52.        items = upload.parseRequest(request);//得到所有的文件  
  53.          
  54.        if(items==null||items.size()==0){  
  55.            String msg = "ImgEmptyErr";  
  56.            context.put("result", msg);  
  57.            return;  
  58.        }  
  59.          
  60.        Iterator i = items.iterator();  
  61.          
  62.        //此处实际只有一个文件  
  63.        while (i.hasNext()) {  
  64.            FileItem fi = (FileItem) i.next();  
  65.            fileName = fi.getName();  
  66.            if (!UtilValidate.isEmpty(fileName)) {  
  67.                File fullFile = new File(fi.getName());  
  68.                //File fullFile = new File(filename);  
  69.                File savedFile = new File(uploadPath, fullFile.getName());  
  70.                int j = 0;  
  71.                while(savedFile.exists()){  
  72.                    j++;  
  73.                    savedFile = new File(uploadPath, savedFile.getName().substring(0,savedFile.getName().lastIndexOf(".")-1)+"("+j+")"+savedFile.getName().substring(savedFile.getName().lastIndexOf("."),savedFile.getName().length()));  
  74.                }  
  75.                fi.write(savedFile);  
  76.                fileName = savedFile.getName();  
  77.            }else{  
  78.                String msg = "ImgEmptyErr";  
  79.                context.put("result", msg);  
  80.                return;  
  81.            }             
  82.        }  
  83.        context.put("result", fileName);  
  84.     } catch (Exception e) {  
  85.         Debug.log("上传产品图片发生错误:"+e);  
  86.         String msg = "sysErr";  
  87.         context.put("result", msg);  
  88.         return;  
  89.     }  

  然后将result结果渲染到freemarker模板，并经回调函数解析后展示给用户。

总结：JQuery强大异常，本文仅从自身使用角度列举了其部分用法，未曾深究最新最优最简用法，暂以此文作为经验总结，以待日后参考修正。代码片段山寨之处实属本人技拙，而非JQuery之过。   
posted on 2012-03-22 12:04 hellxoul 阅读(6981) 评论(1)  编辑  收藏 所属分类: JavaScript

FeedBack:
# re: jquery Ajax 提交[未登录]
2014-08-28 19:13 | 111
爱妃  回复  更多评论
  

只有注册用户登录后才能发表评论。
网站导航:
 
Copyright ©2024 hellxoul Powered By博客园 模板提供：沪江博客