当前位置:&&
本页文章导读:
&&&&?jquery插件开发注意事项小结&&&&&&
　　Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML docu.........&&&&?jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码&&&&&&
(jsp需要引入 ：jquery-1.9.0.js、jquery.form.js ) ，jsp页面使用的是bootstrap制作的，看不懂的标签不用管，form表单大同小异。代码比较简陋，只是为了演示使用ajaxSubmit异步上传图片及保存数据，请.........&&&&?jQuery调用AJAX时Get和post公用的乱码解决方法实例说明&&&&&&
以前在新浪博客写过js调用AJAX时Get和post的乱码解决办法，但是使用js代码比较繁琐，我们在使用ajax进行数据交互时可以使用js的一个成熟框架---jQuery。 一个网站的设计，不管是注册登录还.........
[1]jquery插件开发注意事项小结
&&&&来源:&互联网& 发布时间:&
　　Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。jquery插件开发时要注意以下事项。
　　开发插件的注意事项：
　　1、在编写对象级别的插件时,使用jQuery.fn.extend()方法进行功能扩展;而针对类级别的插件,则使用jQuery.extend方法进行扩展。
　　2、插件的文件命名必须严格遵循jQuery.[插件名].js的规则,以便于与其他的js文件的区分,如新插件文件jquery.newplugin.js.
　　3、如果是对象级别插件,所有的方法都应依附于jquery.fn主体对象;如果是类级别插件,所有的方法都应依附于jquery对象.
　　4、无论是对象级别还是类级别插件,结尾都必须以分号结束,否则,在文件被压缩时,会出现错误提示信息.
　　5、虽然"$"美元符,可以与"jQuery"字符相代替,但在编写插件的代码中,尽量不要使用"$"符号,以避免与别的代码冲突.
　　6、在插件内部的代码中,如果要访问每个元素,可以使用this.each方法来遍历全部元素.
　　7、需要说明的是在插件的内部,this所代表的是通过jQuery选择器所获取的对象,而非传统意义上的对象的引用.
　　8、由于jQuery代码在调用方法时,可以采用链写的方法同时调用多个方法,因此,为了保证这个功能的实现,插件本身必须返回一个jQuery对象.
　　很多插件开发人员都开发了很多不错的jQuery插件，但是对我们这些插件的使用者来说，很多jQuery插件的使用都不是那么直接和透明。而且对于插件开发来说，如果你有一个非常好的架构，将会给你的开发带来极大的益处。所以在正式开发前，注意以上jquery插件开发注意事项还是非常有必要的。
[2]jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
&&&&来源:&互联网& 发布时间:&
(jsp需要引入 ：jquery-1.9.0.js、jquery.form.js ) ，jsp页面使用的是bootstrap制作的，看不懂的标签不用管，form表单大同小异。代码比较简陋，只是为了演示使用ajaxSubmit异步上传图片及保存数据，请海含！ (参考文献：http://www./shouce/jquery/jquery_api/Plugins/Form/ajaxSubmit.html) 一：web (add.jsp)
代码如下: &%@page import="com.fingerknow.project.vo.UserInformation"%& &%@ page language="java" contentType="text/ charset=utf-8" pageEncoding="utf-8"%& &%@ taglib uri="/jsp/jstl/core" prefix="c" %& &c:set var="ctx" value="${pageContext.request.contextPath }" /& &!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"& &html& &head& &meta http-equiv="Content-Type" content="text/ charset=utf-8"& &title&注册商圈&/title& &link href="${ctx}/bootstrap/css/bootstrap.css" rel="stylesheet"& &link href="${ctx}/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"& &link rel="stylesheet" href="${ctx}/css/bootstrap-responsive.min.css" /& &link rel="stylesheet" href="${ctx}/css/jquery-ui.css" /& &link rel="stylesheet" href="${ctx}/css/uniform.css" /& &link rel="stylesheet" href="${ctx}/css/select2.css" /& &link rel="stylesheet" href="${ctx}/css/unicorn.main.css" /& &link rel="stylesheet" href="${ctx}/css/common.css" /& &% response.setCharacterEncoding("utf-8");//这个是设置编码方式 response.setContentType("text/html");//这个是设置网页类型，为文本代码 UserInformation user= String username=""; Integer userId= if(request.getSession().getAttribute("userinfo")!=null){ user=(UserInformation)request.getSession().getAttribute("userinfo"); username=user.getUsername(); userId=user.getUserId(); }else{ username="请&a href='http://localhost:8080/fk/test/login.jsp'&登录&/a&"; } %& &/head& &body& &div & &div & &div & &div & &div & &h1
&&img alt="fingerknow" src="${ctx}/images/fingerknow.png" width=""&&small&中文最大的购物经验分享平台&/small&&/h1& &/div& &div & &a href="#"&首页&/a& |&a href="#"&帮助&/a&&/div& &/div& &/div& &/div& &/div& &div
id="businessEname_div"& &div & &div &&/div& &div & &div & &div & &span & &i &&/i& &/span& &h5&注册商圈&/h5& &/div& &div & &form
method="post" action="${ctx}/upload/upload.do" id="uploadImgForm" enctype="multipart/form-data"& &div
& &label &*商圈名：&/label& &div
& &input type="text" name="businessName" maxlength="20" id="businessName" width="200"/& &input type="text" name="userId" maxlength="20" value="&%=userId%&" id="userId" width="200"/& &div id="businessName_error" &&/div& &/div& &/div& &div & &label &*商圈logo：&/label& &div
& &input type="file" name="file" id="file"& &div id="file_error"&&/div& &/div& &/div& &div & &label &*商圈英文名：&/label& &div
& &input type="text" name="businessEname" id="businessEname" /& &div id="businessEname_error"&&/div& &/div& &/div& &div & &button type="button" id="imgSave" value="Validate" &提交注册&/button& &/div& &/form& &/div& &/div& &/div& &div &&/div& &/div& &/div& &div
& &div & &div
&span&|&/span&&a href="#" rel="nofollow" &隐私条款&/a&&span&|&/span&&a href="#" rel="nofollow"&服务条款&/a&&span&|&/span&&a href="#" rel="nofollow" &粤ICP备号-1&/a&&/p& &/div& &/div& &/div& &script src="${ctx}/js/jquery-1.9.0.js"&&/script& &script src="${ctx}/js/jquery.form.js"&&/script& &script type="text/javascript"& /** * * V1.0 */ $(document).ready(function() { //验证商圈名 $("#businessName").blur(function(){ var businessName=$("#businessName").val(); if(businessName!=""){ $("#businessName_error").html("&img src='${ctx}/images/success_img.gif' /&"); }else{ $("#businessName_error").attr("class","error_div").html("&img src='${ctx}/images/error_img2.gif' /&"+"商圈名不能为空！"); } }); //验证商圈英文名 $("#businessEname").blur(function(){ var businessEname=$("#businessEname").val(); if(businessEname!=""){ $("#businessEname_error").html("&img src='${ctx}/images/success_img.gif' /&"); }else{ $("#businessEname_error").attr("class","error_div").html("&img src='${ctx}/images/error_img2.gif' /&"+"商圈英文名不能为空！"); } }); //图片上传 及数据保存 $("#imgSave").click(function(){ var ext = '.jpg.jpeg.gif.bmp.png.'; var f=$("#file").val(); if (f== "") {//先判断是否已选择了文件 $("#file_error").attr("class","error_div").html("&img src='${ctx}/images/error_img2.gif' /&"+"请添加商圈logo！");
} f = f.substr(f.lastIndexOf('.') + 1).toLowerCase(); if (ext.indexOf('.' + f + '.') == -1) { $("#file_error").attr("class","error_div").html("&img src='${ctx}/images/error_img2.gif' /&"+"图片格式不正确！");
} var options = { url: "${ctx}/upload/upload.do", dataType: 'json', contentType: "application/ charset=utf-8", success: function(data) { // 'data' is an object representing the the evaluated json data // 如果图片上传成功则保存表单注册数据 if(data.status=="0"){ var fileName=data.fileN //alert(fileName); var businessName=$("#businessName").val(); var userId=$("#userId").val(); var businessEname=$("#businessEname").val(); businessName=encodeURI(businessName); businessName=encodeURI(businessName); var urls="${ctx}/business/addBusiness.do?businessName="+businessName+"&businessPic="+fileName+"&businessEname="+businessEname+"&userId="+userId; $.ajax({ type: "post", url:urls , dataType: "json", /*这句可用可不用，没有影响*/ contentType: "application/ charset=utf-8", success: function (data) { if(data.status=="0"){ alert("注册成功!"); }else{ alert("注册失败!原因是："+data.message); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } }); }else{ $("#file_error").attr("class","error_div").html("&img src='${ctx}/images/error_img2.gif' /&"+data.message); } } }; // 提交表单 $('#uploadImgForm').ajaxSubmit(options); }); }); &/script& &/body& &/html&
二：service(FileUploadController.java ----springMVC 之controller层)
代码如下: @Controller @RequestMapping(value = "/upload") public class FileUploadController { private L @RequestMapping(value = "upload.do", method = RequestMethod.POST) public void fileUpload(HttpServletRequest request, HttpServletResponse response) { Map&String, Object& resultMap = new HashMap&String, Object&(); String newRealFileName = try { MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest.getFile("file"); // 获得文件名： String realFileName = file.getOriginalFilename(); if(file.getSize()/4){ resultMap.put("status", 1); resultMap.put("message", "图片不能大于5M"); }else{ System.out.println("获得文件名：" + realFileName); newRealFileName = FileUploadController.getNowTime() + realFileName.substring(realFileName.indexOf(".")); // 获取路径 String ctxPath = request.getSession().getServletContext().getRealPath("//") + "//temp//"; // 创建文件 File dirPath = new File(ctxPath); if (!dirPath.exists()) { dirPath.mkdir(); } File uploadFile = new File(ctxPath + newRealFileName); FileCopyUtils.copy(file.getBytes(), uploadFile); request.setAttribute("files", loadFiles(request)); resultMap.put("status", 0); resultMap.put("fileName", newRealFileName); } } catch (Exception e) { resultMap.put("status", 1); resultMap.put("message", "图片上传出错"); ("***** 图片上传出错 *****"); System.out.println(e); } finally { PrintWriter out = try { out = response.getWriter(); } catch (IOException e) { e.printStackTrace(); } //必须设置字符编码，否则返回json会乱码 response.setContentType("text/charset=UTF-8"); out.write(JSONSerializer.toJSON(resultMap).toString()); out.flush(); out.close(); } } }
[3]jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
&&&&来源:&互联网& 发布时间:&
以前在新浪博客写过js调用AJAX时Get和post的乱码解决办法，但是使用js代码比较繁琐，我们在使用ajax进行数据交互时可以使用js的一个成熟框架---jQuery。 一个网站的设计，不管是注册登录还是分页查找，都需要提交参数到服务器以便得到所需的页面数据。为了减少用户因刷新页面带来的煎熬，ajax诞生。但是初学者进行项目开发时，会遇到一个很烦人的问题：中文乱码。下面我就通过一个简单的实例来告诉大家哪些地方可能会导致乱码，我们需要通过什么方式来解决。 我们这个实例主要实现用户注册时用户名是否正确（已存在），在焦点移开username文本text时，对username进行异步提交并由servlet进行提取判断，并将结果返回页面做出相应提示。第一步，新建一个web工程（默认GBK格式），取名jQuery_Ajax。在其WebRoot目录下新建js文件包，将jquery-1.4.4.js放于其中。 第二步，在src下创建servlet包，并编写Vali.java
import java.io.IOE import java.io.PrintW import java.net.URLD import javax.servlet.ServletE import javax.servlet.http.HttpS importjavax.servlet.http.HttpServletR importjavax.servlet.http.HttpServletR public class Vali extends HttpServlet { @Override protectedvoid service(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException { StringuserName = URLDecoder.decode(request.getParameter("userName"),"utf-8"); System.out.println(userName); response.setContentType("text/charset=utf-8"); PrintWriter pw =response.getWriter(); if(userName.equals("张三")){ pw.println("错误"); }else{ pw.println("正确"); } } }
从可从代码看出，含有编码格式的语句便是解决乱码的办法之一。 在代码中注意：1.URLDecoder.decode(request.getParameter("userName"),"utf-8")----将页面传来的数据进行格式转换并提取 2.response.setContentType("text/charset=utf-8")----将响应返回值进行utf-8编码后返回页面 3.特别注意2中的转换需写在本方法内一切的response之前，否则可能失效 4.本servlet对数据的格式编码只适合Post方法，若提交方式为GET则提取页面数据的代码如下：
代码如下: request.setCharacterEncoding("utf-8"); StringuserName = request.getParameter("userName"); userName= new String(userName.getBytes("iso-8859-1"),"utf-8");
第三步，编写简单注册页面ajax.jsp
代码如下: &%@ page language="java"import="java.util.*" pageEncoding="utf-8"%& &% String path = request.getContextPath(); String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %& &!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"& &html& &head& &base href="&%=basePath%&"& &title&My JSP 'ajax.jsp' starting page&/title& &metahttp-equiv="pragma" content="no-cache"& &metahttp-equiv="cache-control" content="no-cache"& &metahttp-equiv="expires" content="0"& &metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"& &metahttp-equiv="description" content="This is my page"& &!-- &linkrel="stylesheet" type="text/css"href="styles.css"& --& &scripttype="text/javascript"src="js/jquery-1.4.4.js"&&/script& &scripttype="text/javascript"& function vali(){ $.ajax({ type:"POST", url:"/jQuery_Ajax/Vali", data:encodeURI(encodeURI("userName="+$(":text").val())), success:function(data){ $("span").text(data); } }); } &/script& &/head& &body& 用户名:&inputtype="text" name="userName"onblur="vali();"/&&span&&/span&&br/& 密码:&inputtype="password" name="password" /& &/body& &/html&
在代码中注意：1.页面要设置为utf-8，且引入jquery-1.4.4.js 2.ajax通过POST方法传递数据，注意data的设置。将返回数据填入span标签。如果使用GET方法传递页面数据，js代码如下：
代码如下: function vali(){ $.ajax({ type:"GET", url:"/jQuery_Ajax/Vali", data:encodeURI("userName="+$(":text").val()), success:function(data){ $("span").text(data); } }); }
最后一步，在web.xml配置servlet和映射
代码如下: &servlet& &description&This is the description of my J2EEcomponent&/description& &display-name&This is the display name of my J2EEcomponent&/display-name& &servlet-name&Vali&/servlet-name& &servlet-class&servlet.Vali&/servlet-class& &/servlet& &servlet-mapping& &servlet-name&Vali&/servlet-name& &url-pattern&/Vali&/url-pattern& &/servlet-mapping&
经过以上代码的编写，本注册验证的项目已完成，将其部署至tomcat并通过网页访问。最后总结大神的jQuery乱码问题解决方法： 1. 检查页面编码，将页面编码设置为utf8，如下： &metahttp-equiv="content-type" content="text/charset=utf-8"& 2. 检查servlet，在doPost或doGet方法中添加如下代码： response.setContentType("text/charset=utf-8"); 3. 修改tomcat文件，在TOMCAT_HOME/conf/server.xml文件中增加URIEncoding=”utf8”: &Connector port="8080"protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443"URIEncoding="utf-8"/& 4. 在工程中新增过滤器，将编码方式设置为utf8 经过以上四步操作后，问题依旧。 5. 检查ie的http header，查看contentType字段，如下： contentType:"application/x-www-form-urlencoded" 6．检查firefox的http header，查看contentType字段，如下： contentType:"application/x-www-form-charset=UTF-8" 对比5,6两步，问题出现。 7.修改jQuery-1.x.x.js文件，将 contentType:"application/x-www-form-urlencoded"改为下面的代码 contentType:"application/x-www-form-charset=UTF-8"
最新技术文章:
特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！
(C)2012-,E-mail:www_169it_(请将#改为@)