jquery Ajax 提交

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之过。