日期:2014-05-16  浏览次数:20586 次

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


    2.整个form的提交
        如果不使用JQuery的form ajax提交,则必须手动组装所有的表单元素键值对。现在使用JQuery的一个插件:jquery.form.js。将jquery.js,jquery.form.js文件都包含到项目中。然后使用如下代码:
      
$('#'+newid+'_frmNewAddr').ajaxForm({ beforeSubmit: validate ,success: showResponse});

....

function validate(formData, jqForm, options){
    var form = jqForm[0]; 
    if (!form.new_recipient.value ) { 
        alert('收件人必须填写!'); 
        return false; 
    } 
    if (!form.new_address.value ) { 
        alert('收件地址必须填写!'); 
        return false; 
    } 

   ....

   return true; 
}

function showResponse(responseText, statusText, xhr, $form){
	var address = eval("("+removeDivTag(responseText)+")"); 
	$("#address_recipient")[0].innerHTML = address.recipient;
	$("#address_address")[0].innerHTML = address.address;
	$("#address_organization")[0].innerHTML = address.organization;
         ......
}
       

      其中$('#'+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。
<script type="text/javascript">
function ajaxFileUpload(imgName)
{
	$("#loading")
	.ajaxStart(function(){
		$(this).show();
	})
	.ajaxComplete(function(){
		$(this).hide();
	});

	$.ajaxFileUpload
	(
		{
			url:'/productmgr/control/uploadProductImg',
			secureuri:false,
			fileElementId: imgName+'File',
			dataType: 'text',
			success: function (data, status)
			{
				data = removeDivTag(data);
				if(data=="ImgEmptyErr"){
					alert("请选择上传图片!");
					return;
				}
				if(data=="sysErr"){
					alert("上传失败,请重试!");
					return;
				}
				$("#"+imgName)[0].value = data;
				$("#"+imgName+"Div")[0].innerHTML = "上传成功!"
				//alert($("#"+imgName)[0].value);
			},
			error: function (data, status, e)
			{
				alert("添加产品图片时发生如下错误:"+e);
			}
		}
	)	
	return false;

}
</script>

      本人服务器端使用的是beanshell脚本,代码如下:
/*
 * 产品图片上传
 * 
 * author : Emerson
 *
 * Yiihee , Inc. */


import org.ofbiz.base.util.*;
import org.ofbiz.base.util.string.*;
import org.ofbiz.entity.*;
import java.text.SimpleDateFormat;
import java.util.*;
import java.io.*;
import org.apache.commons.fileupload.disk.*;
import org.apache.commons.fileupload.servlet.*;
import org.apache.commons.fileupload.*;


	configProperties = UtilProperties.getProperties("opencommon.properties");
	String imageUploadServerPath = configProperties.get("openb2c.image.upload.server.path");

	//SimpleDateFormat sf = new SimpleDateFormat("yyyyMMddHHmmss");   
	//Date date = new Date();   
	//String filename = sf.format(date);
	String fileName;

	File uploadPath = new File(imageUploadServerPath);//上传文件目录
    if (!uploadPath.exists()) {
       uploadPath.mkdirs();
    }
    // 临时文件目录
    File tempPathFile = new File(imageUploadServerPath+"\\temp\\");
    i