前端页面插件 jquery-form-3.51.0.js 使用详解
下载 jquery-form-3.51.0.js 开发包在页面引入
jquery-form-3.51.0.js的用法就是可以发送异步的ajaxForm请求
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/include/taglibs.jspf"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>绿魔方管理平台</title>
<link rel="stylesheet"
href="${ctx}/resources/libs/bootstrap-3.3.5-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="${ctx}/resources/libs/css/normalize.css">
<link rel="stylesheet" href="${ctx}/resources/libs/css/cssresets.css">
<link rel="stylesheet" href="${ctx}/resources/css/main.css">
<link rel="stylesheet" href="${ctx}/resources/css/goodsmanage.css">
<script src="${ctx}/resources/js/jquery-2.1.4.min.js"></script>
<script src="${ctx}/resources/js/jquery-form-3.51.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form1").ajaxForm(function(data) {
if (data.code != 'ok') {
alert(data.msg);
} else {
window.location.href = "${ctx}/yd/list";
}
});
});
</script>
</head>
<body>
<div class="wrapper clearfix">
<!-- 主页面开始 -->
<div class="content-wrapper">
<!--title-->
<div class="action-span">
<ol class="breadcrumb">
<li class="crumb-img"></li>
<li class="none-line">药店管理</li>
<li class="active">编辑药店</li>
</ol>
</div>
<!--middle-->
<div class="main-content ">
<input type="file" id="file1" name="file" onchange="ajaxFileUpload('1');" style="display: none">
<input type="file" id="file2" name="file" onchange="ajaxFileUpload('2');" style="display: none">
<input type="file" id="file3" name="file" onchange="ajaxFileUpload('3');" style="display: none">
<form id="form1" action="${ctx }/yd/update/" method="post">
<div class="bg-white clearfix" style="padding-bottom: 50px;">
<%-- <h1 class="detail-title">
<a class="btn btn-default" href="">下载批量导入模板</a>
<button class="btn btn-default" onclick="$('#file3').click();">批量导入客户信息</button>
<input type="file" id="file3" name="file" style="display: none" onchange="$.myUpExcel('','file3','1')">
<span style="font-size: 12px;color: red;">导入失败会弹出下载框，成功无特殊提示</span>
</h1> --%>
<h1 class="detail-title">基本信息</h1>
<div class="div_table clo-xs-8 col-xs-offset-1">
<div class="form-div clearfix">
<div class=" uesr-id-select">
<div class="col-xs-4 goods-type text-right"><span style="color: red;">*</span>药店名称:</div>
<div class="col-xs-2 dropdown">
<input class="form-control" name="pharmacy_name" value="${ydMap.pharmacy_name }" type="text" required="required">
<input type="hidden" id="id" name="id" value="${ydMap.id }" >
</div>
</div>
</div>
<div class="form-div clearfix">
<div class="uesr-id-select">
<div class="col-xs-4 goods-type text-right"><span style="color: red;">*</span>服务等级:</div>
<div class="dropdown col-xs-2">
<select class="form-control" name="grade_service">
<c:forEach items="${djList}" var="var">
<option value="${var.fieldvalue}" <c:if test="${ydMap.fieldvalue == var.fieldvalue}">selected</c:if>>${var.explain}-${var.description}</option>
</c:forEach>
</select>
</div>
</div>
</div>
<div class="form-div clearfix">
<div class=" uesr-id-select">
<div class="col-xs-4 goods-type text-right">所属公司:</div>
<div class="dropdown col-xs-2">
<select class="form-control" name="pharmacy_f_id">
<c:forEach items="${gsList}" var="var">
<option value="${var.id}">${var.name}</option>
</c:forEach>
</select>
</div>
<div class="col-xs-2 goods-type text-right"><a href="${ctx }/gs/toadd">添加公司</a></div>
</div>
</div>
<div class="form-div clearfix">
<div class=" uesr-id-select">
<div class="col-xs-2 goods-type text-right"><span style="color: red;">*</span>省/市:</div>
<div class="dropdown col-xs-2">
<select class="form-control" name="province_id" onchange="ssqChange('dic/city','city_id',this.value)">
<option value="">请选择省/市</option>
<c:forEach items="${pList}" var="var">
<option value="${var.id}" <c:if test="${ydMap.province_id == var.id}">selected</c:if> >${var.name}</option>
</c:forEach>
</select>
</div>
<div class="col-xs-1 goods-type text-right maxw-50">市:</div>
<div class="dropdown col-xs-2">
<select class="form-control" name="city_id" id="city_id" onchange="ssqChange('dic/district','district_id',this.value)">
<option value="">请选择市</option>
<c:forEach items="${sList}" var="var">
<option value="${var.id}" <c:if test="${ydMap.city_id == var.id}">selected</c:if> >${var.cname}</option>
</c:forEach>
</select>
</div>
<div class="col-xs-1 goods-type text-right maxw-80">区/县:</div>
<div class="dropdown col-xs-2">
<select class="form-control" name="district_id" id="district_id">
<option value="">请选择区/县</option>
<c:forEach items="${xList}" var="var">
<option value="${var.id}" <c:if test="${ydMap.district_id == var.id}">selected</c:if> >${var.dname}</option>
</c:forEach>
</select>
</div>
</div>
</div>
<div class="form-div clearfix">
<div class=" uesr-id-select">
<div class="col-xs-4 goods-type text-right"></div>
<div class="col-xs-4 dropdown">
<input class="form-control" name="pharmacy_address" value="${ydMap.pharmacy_address }" type="text" required="required" placeholder="详细地址">
</div>
</div>
</div>
<div class="form-div clearfix">
<div class="uesr-id-select">
<div class="col-xs-2 goods-type text-right"><span style="color: red;">*</span>联系人姓名:</div>
<div class="ht-34 col-xs-2">
<input class="form-control" type="text" name="lxr_name" value=${ydMap.lxr_name } >
</div>
</div>
</div>
<div class="form-div clearfix">
<div class="uesr-id-select">
<div class="col-xs-2 goods-type text-right"><span style="color: red;">*</span>联系人手机号:</div>
<div class="ht-34 col-xs-2">
<input class="form-control" type="text" name="lxr_mobile" maxlength="11" value=${ydMap.lxr_mobile } >
</div>
</div>
</div>
<div class="form-div clearfix">
<div class=" uesr-id-select">
<div class="col-xs-2 goods-type text-right"><span style="color: red;">*</span>合同编号:</div>
<div class="ht-34 col-xs-2">
<input class="form-control" name="htbh" type="number" required="required" value=${ydMap.htbh }>
</div>
</div>
</div>
</div>
<h1 class="detail-title">资质及法人信息</h1>
<div class="div_table clo-xs-8 col-xs-offset-1">
<div class="form-div clearfix">
<div class="uesr-id-select">
<div class="col-xs-2 goods-type text-right"><span style="color: red;">*</span>公司名称:</div>
<div class="ht-34 col-xs-2">
<input class="form-control" type="text" name="gsname" required="required" value=${ydMap.gsname }>
</div>
</div>
</div>
<div class="form-div clearfix">
<div class="uesr-id-select">
<div class="col-xs-2 goods-type text-right"><span style="color: red;">*</span>统一社会信用代码:</div>
<div class="ht-34 col-xs-2">
<input class="form-control" type="text" name="tyshxy_url" required="required" value=${ydMap.tyshxy_url }>
</div>
</div>
</div>
<div class="clearfix">
<div class=" uesr-id-select">
<div class="col-xs-2 goods-type text-right"><span style="color: red;">*</span>营业执照:</div>
<div class=" col-xs-10 ">
<div id="uploader-demo">
<div id="fileList1" class="quali center-block" style="max-width:100%;">
<img alt="" src="${img}${ydMap.license_url }" style="width: 180px;height: auto;">
</div>
<div id="filePicker" class="picup-btn text-center col-xs-2" onclick="$('#file1').click();">选择图片</div>
<div class="img-tip col-xs-10">上传图片大小不超过2M，图片格式为Png或者Jpg</div>
<input type="hidden" id="pic1" name="license_url" value="${ydMap.license_url }" required="required">
</div>
</div>
</div>
</div>
<div class="form-div clearfix">
<div class="uesr-id-select">
<div class="col-xs-2 goods-type text-right"><span style="color: red;">*</span>法人姓名:</div>
<div class="ht-34 col-xs-2">
<input class="form-control" type="text" name="fr_name" required="required" value=${ydMap.fr_name }>
</div>
</div>
</div>
<div class="form-div clearfix">
<div class="uesr-id-select">
<div class="col-xs-2 goods-type text-right"><span style="color: red;">*</span>法人手机号:</div>
<div class="ht-34 col-xs-2">
<input class="form-control" type="text" name="fr_phone" maxlength="11" required="required" value=${ydMap.fr_phone }>
</div>
</div>
</div>
<div class="form-div clearfix">
<div class="uesr-id-select">
<div class="col-xs-2 goods-type text-right"><span style="color: red;">*</span>法人身份证号:</div>
<div class="ht-34 col-xs-2">
<input class="form-control" type="text" name="fr_card" maxlength="18" required="required" value=${ydMap.fr_card }>
</div>
</div>
</div>
<div class="clearfix">
<div class=" uesr-id-select">
<div class="col-xs-2 goods-type text-right"><span style="color: red;">*</span>法人身份证正面：</div>
<div class=" col-xs-10 ">
<div id="uploader-demo">
<div id="fileList2" class="quali center-block" style="max-width:100%;">
<img alt="" src="${img}${ydMap.fr_card_url_z }" style="width: 180px;height: auto;">
</div>
<div id="filePicker" class="picup-btn text-center col-xs-2" onclick="$('#file2').click();">选择图片</div>
<div class="img-tip col-xs-10">上传图片大小不超过2M，图片格式为Png或者Jpg</div>
<input type="hidden" id="pic2" name="fr_card_url_z" value="${ydMap.fr_card_url_z }" required="required">
</div>
</div>
</div>
</div>
<div class="clearfix">
<div class="col-xs-2 goods-type text-right"><span style="color: red;">*</span>法人身份证反面：</div>
<div class=" col-xs-10 ">
<div id="uploader-demo">
<div id="fileList3" class="quali center-block" style="max-width:100%;">
<img alt="" src="${img}${ydMap.fr_card_url_f }" style="width: 180px;height: auto;">
</div>
<div id="filePicker" class="picup-btn text-center col-xs-2" onclick="$('#file3').click();">选择图片</div>
<div class="img-tip col-xs-10">上传图片大小不超过2M，图片格式为Png或者Jpg</div>
<input type="hidden" id="pic3" name="fr_card_url_f" value="${ydMap.fr_card_url_f }" required="required">
</div>
</div>
</div>
</div>
<h1 class="detail-title">账户信息</h1>
<div class="div_table clo-xs-8 col-xs-offset-1">
<div class="form-div clearfix">
<div class="uesr-id-select">
<div class="col-xs-4 goods-type text-right"><span style="color: red;">*</span>对接银行:</div>
<div class="ht-34 col-xs-2">
<input class="form-control" type="text" name="js_yh" required="required" value=${ydMap.js_yh }>
</div>
</div>
</div>
<div class="form-div clearfix">
<div class="uesr-id-select">
<div class="col-xs-4 goods-type text-right"><span style="color: red;">*</span>结算账单邮箱:</div>
<div class="ht-34 col-xs-2">
<input class="form-control" type="text" name="js_email" required="required" value=${ydMap.js_email }>
</div>
</div>
</div>
<div class="form-div clearfix">
<div class=" uesr-id-select">
<div class="col-xs-4 goods-type text-right"><span style="color: red;">*</span>保证金转换比例:</div>
<div class="col-xs-2 dropdown">
<input class="form-control" name="bzj_retio" type="number" step="0.01" max="1" min="0" required="required" value=${ydMap.bzj_retio }>
</div>
</div>
</div>
<div class="form-div clearfix">
<div class=" uesr-id-select">
<div class="col-xs-4 goods-type text-right"><span style="color: red;">*</span>回款转换比例:</div>
<div class="col-xs-2 dropdown">
<input class="form-control" name="jhed_ratio" type="number" step="0.01" max="1" min="0" required="required" value=${ydMap.jhed_ratio }>
</div>
</div>
</div>
</div>
<h1 class="detail-title">其他信息</h1>
<div class="div_table clo-xs-8 col-xs-offset-1">
<div class="ht-34 clearfix">
<div class="col-xs-4 goods-type text-right"><span style="color: red;">*</span>关联药批:</div>
<div class="col-xs-2 goods-type text-right"><a href="${ctx }/gs/toadd">添加药批</a></div>
<div class="col-xs-11 col-xs-offset-1 week-chose">
<c:forEach var="var2" items="${ypList}" varStatus="vs2">
<label class="checkbox-inline">
<input type="checkbox" value="${var2.id}" name="yp_ids"
<c:forEach items="${xzypList}" var="var3">
${var2.id==var3.yp_id ?'checked="checked"' :'' }
</c:forEach>
> ${var2.pharmacy_name}
</label>
</c:forEach>
</div>
</div>
<%-- <div class="form-div clearfix">
<div class="uesr-id-select">
<div class="col-xs-4 goods-type text-right"><span style="color: red;">*</span>关联药批:</div>
<div class="dropdown col-xs-2">
<select class="form-control" name="yp_id">
<option value="">请关联药批</option>
<c:forEach items="${ypList}" var="var">
<option value="${var.id}">${var.pharmacy_name}</option>
</c:forEach>
</select>
</div>
<div class="col-xs-2 goods-type text-right"><a href="">添加药批</a></div>
</div>
</div> --%>
<div class="doctor_type_2">
<div class="form-div clearfix">
<div class=" uesr-id-select">
<div class="col-xs-4 goods-type text-right"></div>
</div>
</div>
</div>
<div class="col-xs-4 col-xs-offset-2">
<div class="col-xs-3">
<button style="min-width: 74px;" type="submit" class="btn-search maxw-100">保存</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script
src="${ctx}/resources/libs/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="${ctx}/resources/libs/js/ajaxfileupload.js"></script>
<script src="${ctx}/resources/js/main.js"></script>
<script type="text/javascript">
/* function uploads(h){
window.location.href="${ctx}/login/exportTemplate?&flag="+h;
} */
function ssqChange(url,id,val){
if(val != ''){
$("#"+id).empty();
$.ajax({
type : "post",
url : "${ctx}/"+url,
dataType : "json",
data : {
id : val
},
success : function(data) {
if(data != null){
var html = "<option value=''>请选择省/市</option>";
$.each(data,function(i,d){
html += "<option value='"+d.id+"'>"+d.name+"</option>";
});
if(html != ""){
$("#"+id).append(html);
}
}
}
});
}
}
function ajaxFileUpload(v){
$.myUpload("${ctx}/dic/toUploadImg", "${img}", 'file' + v,
"fileList" + v, "pic" + v);
}
/* $(function(){
var boxObj = $("input:checkbox[name='yp_ids']"); //获取所有的复选框值
var expresslist = ${yp_id}; //用el表达式获取在控制层存放的复选框的值为字符串类型
var express = expresslist.split(',');
$.each(express, function(index, expressId){
boxObj.each(function () {
if($(this).val() == expressId) {
$(this).attr("checked",true);
}
});
});
}); */
</script>
</body>
</html>
后台Controller代码（注意：@ResponseBody 这个注解是必须使用的，因为jquery-form-3.51.0.js发送的ajax请求）
/**
* Description: update保存
* @param model
* @return id
* @author lipeng
* @date 2019年5月6日
* @version
*/
@ResponseBody
@RequestMapping(value = "yd/update")
@AopLog(operationName="药店列表",operationType="编辑保存")
public Object updateDrug(String id,AddYaoDian yaodian,ModelMap model){
Map<String,String> map = new HashMap<>();
if(yaodian.validator()){
map = ydService.updateDrug(yaodian);
}else{
map.put("code", "err");
map.put("msg", "信息不全或错误，例如：必填项是否填写及手机号或身份证号是否正确。");
}
return map;
//return "yd/edit";
//return "redirect:/yd/list";
}