鉴于项目需要,开始边看Demo边使用JQuery。现将项目中暂时遇到的三种使用JQuery进行Ajax提交的方式做个总结。因为没有系统学习,有点山寨,只求在项目中实现功能。
1.URL+GET参数提交
这种方式是最普遍的,只要包含jquery.js就可以正常使用。
2.整个form的提交
如果不使用JQuery的form ajax提交,则必须手动组装所有的表单元素键值对。现在使用JQuery的一个插件:jquery.form.js。将jquery.js,jquery.form.js文件都包含到项目中。然后使用如下代码:
其中$('#'+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。
本人服务器端使用的是beanshell脚本,代码如下:
然后将result结果渲染到freemarker模板,并经回调函数解析后展示给用户。
总结:JQuery强大异常,本文仅从自身使用角度列举了其部分用法,未曾深究最新最优最简用法,暂以此文作为经验总结,以待日后参考修正。代码片段山寨之处实属本人技拙,而非JQuery之过。
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\\");
if (!tempPathFile.exists()) {
tempPathFile.mkdirs();
}
try {
// Create a factory for disk-based file items
DiskFileItemFactory factory = new DiskFileItemFactory();
// Set factory constraints
factory.setSizeThreshold(4096); // 设置缓冲区大小,这里是4kb
factory.setRepository(tempPathFile);//设置缓冲区目录
// Create a new file upload handler
ServletFileUpload upload = new ServletFileUpload(factory);
// Set overall request size constraint
upload.setSizeMax(4194304); // 设置最大文件尺寸,这里是4MB
List items = null;
items = upload.parseRequest(request);//得到所有的文件
if(items==null||items.size()==0){
String msg = "ImgEmptyErr";
context.put("result", msg);
return;
}
Iterator i = items.iterator();
//此处实际只有一个文件
while (i.hasNext()) {
FileItem fi = (FileItem) i.next();
fileName = fi.getName();
if (!UtilValidate.isEmpty(fileName)) {
File fullFile = new File(fi.getName());
//File fullFile = new File(filename);
File savedFile = new File(uploadPath, fullFile.getName());
int j = 0;
while(savedFile.exists()){
j++;
savedFile = new File(uploadPath, savedFile.getName().substring(0,savedFile.getName().lastIndexOf(".")-1)+"("+j+")"+savedFile.getName().substring(savedFile.getName().lastIndexOf("."),savedFile.getName().length()));
}
fi.write(savedFile);
fileName = savedFile.getName();
}else{
String msg = "ImgEmptyErr";
context.put("result", msg);
return;
}
}
context.put("result", fileName);
} catch (Exception e) {
Debug.log("上传产品图片发生错误:"+e);
String msg = "sysErr";
context.put("result", msg);
return;
}
然后将result结果渲染到freemarker模板,并经回调函数解析后展示给用户。
总结:JQuery强大异常,本文仅从自身使用角度列举了其部分用法,未曾深究最新最优最简用法,暂以此文作为经验总结,以待日后参考修正。代码片段山寨之处实属本人技拙,而非JQuery之过。