jQuery.form的使用方法

首先需要引入jquery.form.js
之后即可使用


本示例为上传文件+form表单提交
使用的方法是提交地址写在form表单当中，在提交前进行检查工作，检查内容是否符合规范（是否为空），若为空则弹出提示信息，并不进行发送处理。
  1. <%--
  2.   Created by IntelliJ IDEA.
  3.   User: 水之笔记
  4.   Date: 2017/3/9
  5.   Time: 22:02
  6.   To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <html>
  10. <head>
  11.     <title>上传获奖作品</title>
  12.     <script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery.js"></script>
  13.     <script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/is_null.js"></script>
  14.     <script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery.form.js"></script>
  15.     <script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/competition_name.js"></script>
  16.     <script type="text/javascript">
  17.         $(document).ready(function () {
  18.             $("#uploadForm").ajaxForm({
  19.                 resetForm: true,
  20.                 clearForm: true,
  21.                 //定义返回JSON数据，还包括xml和script格式
  22.                 dataType: 'json',
  23. //                在发送之前进行的操作，如果有问题，返回false即可不会进行提交
  24.                 beforeSend: function () {
  25.                     //表单提交前做表单验证
  26.                     if (isNull($("#name").val()) || isNull($("#year").val()) || $("#competition") == "请选择") {
  27.                         alert("不能为空");
  28.                         return false;
  29.                     }
  30.                     if ($("#file1").get(0).files[0] == null) {
  31.                         alert("请至少上传源文件");
  32.                         return false;
  33.                     }
  34.                     return true;
  35.                 },
  36.                 success: function (data) {
  37.                     //提交成功后调用
  38.                     alert(data.messageContent);
  39.                     window.location.reload();
  41.                 }
  42.             });
  43.         });
  45.     </script>
  46. </head>
  47. <body>
  48. <div>
  49.     <form method="post" enctype="multipart/form-data" id="uploadForm"
  50.           action="${pageContext.request.contextPath}/background/worksInsert">
  51.         作品名称：<input type="text" name="name" id="name"><br>
  52.         参赛年份：<input type="text" name="year" id="year"><br>
  53.         参加竞赛：<select name="competition" id="competition">
  54.         <option value="请选择">请选择</option>
  55.     </select><br>
  56.         源文件上传:<input type="file" name="file1" id="file1"><br>
  57.         展示文件上传:<input type="file" name="file2" id="file2"><br>
  58.         附件上传:<input type="file" name="file3" id="file3"><br>
  59.         <input type="submit" value="提交">
  61.     </form>
  62. </div>
  63. </body>
  64. </html>

posted @ 2017-03-26 19:31  水之笔记  阅读(6798)  评论(0)  编辑  收藏  举报