`

jquery提交form及实现ajax刷新

 
阅读更多
<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/jquery.form.js"></script>
<form action="${pageContext.request.contextPath}/pcSystemSetting/changeInformation" 
      id="form_myinformation"name="myonformationform" method="post" enctype="multipart/form-data"> 
	<div title="基本资料">
		<table border=0>
			<tr>
				<td align="right">账号</td>
				<td><input type=text id="account" name="account" value="${wxUser.wxUserName}" readonly/></td>
				<td align="right">姓名(公司简称)</td>
				<td><input type=text id="comName" name="name" value="${wxUser.wxUserRealname}" /></td>
				<td align="right">身份证号</td>
				<td><input type=text id="idcard" name="idcard"value="${wxUser.wxIdNumber}" /></td>
			</tr>
			<tr>
				<td align="right">手机</td>
				<td><input type=text id="phone" name="phone"value="${wxUser.wxUserContact1}" /></td>
				<td align="right">电话</td>
				<td><input type=text id="tel" name="tel" value="${wxUser.wxUserContact2}" /></td>
				<td align="right">角色权限</td>
				<td>
					<select name="jsqx" id="jsqx" style="width: 155px; height: 22px;" onclick="getrolename()">
					<option value="0">--请选择--</option>
					<c:forEach items="${roleList}" var="ROL" varStatus="idxStatus">
					<option value="${ROL.idwxRole}"
					<c:forEach items="${getUserRole}" var="WXR" varStatus="idxStatus">
					<c:if test="${idxStatus.index==0}">
					<c:if test="${role_name=='技师' && ROL.idwxRole==2}">  selected  </c:if>
					<c:if test="${role_name!='技师' }">
					<c:if test="${WXR.idwxRole==ROL.idwxRole}">selected</c:if>
					</c:if>
					</c:if>
					</c:forEach>>${ROL.wxRoleName}</option>
					</c:forEach>
					</select>
					<input type="hidden" id="jsqu_roleId" name="roleId" value="" />
					<input type="hidden" id="getroleName" name="roleTypeName" value="${role_name}"/>
				</td>
			</tr>
			<tr>
				<td align="right">QQ</td>
				<td><input type=text id="qq" name="qq" value="${wxUser.wxUserQQ}" /></td>
				<td align="right">支付宝账号</td>
				<td><input type=text id="alipay" name="alipay" value="${wxUser.wxQianbao.wxQianbaoZhifubao}" /></td>
				<td align="right">邮箱</td>
				<td><input type=text id="email" name="email" value="${wxUser.wxUserEmail}" /></td>
			</tr>
			<tr>
				<td align="right">地址</td>
				<td colspan="6">
					<c:choose>
						<c:when test="${empty  addressList}">
							<input type=text id="pro" name="pro" style="width:100px;"/>&nbsp;省 
							<input type=text id="city" name="city" style="width:100px;"/>&nbsp;市 
							<input type="text" id="dis" name="dis"  style="width:105px;"/>&nbsp;区 
							<input type=text id="det" name="det" style="width:300px;"/>&nbsp;街道
						</c:when>
						<c:otherwise>
							<c:forEach items="${addressList}" var="addr">
								<input type=text id="pro" name="pro"
								value="${addr.wxAddressProvince}"  style="width:100px;"/>&nbsp;省 
								<input type=text id="city" name="city"
								value="${addr.wxAddressCity}" style="width:100px;"/>&nbsp;市 
								<input type="text" id="dis" name="dis"
								value="${addr.wxAddressDistrict}" style="width:105px;"/>&nbsp;区 
								<input type=text id="det" name="det"
								value="${addr.wxAddressDetailed}" style="width:300px;"/>&nbsp;街道
							</c:forEach>
						</c:otherwise>
					</c:choose>
			       </td>
			</tr>
			<tr>
				<td align="right">状态设置</td>
				<td colspan="5">
					<input type="radio" name="userType"
					      <c:if test="${wxUser.wxUserUserType == 0}">checked="checked" </c:if>
					value="0" />新建账户 
					<input type="radio" name="userType"
					      <c:if test="${wxUser.wxUserUserType == 1}">checked="checked" </c:if>
						    value="1" />在线使用
					<input type="radio" name="userType"
					      <c:if test="${wxUser.wxUserUserType == 2}">checked="checked" </c:if>
					value="2" />停用账户
				</td>
			</tr>
			<tr>
				<td colspan="6" align="center">
					<input type=file name="myfile" id="myfile" />
					<img src="${wxUser.uploadImg}" id="img_user_file" style="height: 180px; width: 190;" />
				</td>
			</tr>
			<tr>
				<td align="center" colspan="6">
					<input type="hidden" name="butType" id="butType" value="确认修改" />
					<input type="button" value="确认修改" onclick="changeAccountInfo()" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="button" value="账号激活" onclick="activate()" />
				</td>
			</tr>
		</table>
	</div>
</form>

 

function changeAccountInfo() {
				$("#butType").val("确认修改");
				var RolePermissions = $("#jsqx").val(); //角色权限id
				if (RolePermissions == 0) {
					$.messager.alert('提醒','请选择角色','error');
					return;
				}
				
				$("#jsqu_roleId").val(RolePermissions);
				$("#form_myinformation").submit(function(){
					var options = {
							error: changeAccount_error,
							success: changeAccount_success
					};
					$(this).ajaxSubmit(options);
					return false;
				});
				$("#form_myinformation").submit();
			}
			
			function changeAccount_success(data, status) {
				data = eval("("+ data + ")");
				if (data.result == "1") {
					alert("修改成功!");
				} else if (data.result == "0") {
					alert("修改失败!");
				} else {
					alert(data.message);
				}
				
				if (data.imgfile != undefined && data.imgfile != "") {
					$("#img_user_file").attr("src", data.imgfile);
				}
			}
			
			function changeAccount_error(data) {
				alert(data);
			}

 

分享到:
评论

相关推荐

    jQuery实现form表单基于ajax无刷新提交方法详解

    主要介绍了jQuery实现form表单基于ajax无刷新提交方法,结合实例形式分析了jQuery使用$.ajax()方法实现无刷新提交的详细步骤与实现技巧,并附带了一个较为完整的实例供大家参考,需要的朋友可以参考下

    jQuery实现form表单基于ajax无刷新提交方法实例代码

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法。分享给大家供大家参考,具体如下: 首先,新建Login.html页面: &lt;!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...

    jquery ajax表单提交

    表单进行无刷新提交,ajax技术 if (!this.length) { log('ajaxSubmit: skipping submit process - no element selected'); return this; } var method, action, url, $form = this; if (typeof options == ...

    jQuery Ajax无刷新提交表单并执行邮件通知

    ajax表单验证,无刷新提交表单,并发送邮件通知

    jquery.form.js完美ajax无刷新上传图片插件

    jquery.form.js,这是一个完美提交表单的jquery插件,jquery的ajax无法提交图片,而这个插件可以完美解决,使用方法,将该文件放到jquery后面引入:$('#order_form').ajaxForm(function(a) { var b = eval("(" + a ...

    ASP.net批处理实现无刷新ajax和jquery.form的图片批量上传例子

    ASP.net批处理实现无刷新ajax和jquery.form的图片批量上传例子

    jQuery ajaxSubmit 实现ajax提交表单局部刷新

    主要介绍了jQuery ajaxSubmit 实现ajax提交表单局部刷新 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

    基于jQuery通过jQuery.form.js插件使用ajax提交form表单

    我们在提交表单的时候,如果没有使用ajax提交,页面都会自己刷新一下,显得非常的不友好,所以我们需要把我们的表单提交修改为ajax的模式,可以让用户清楚地知道他们在提交表单的时候处在哪一个阶段:正在提交?提交...

    基于jQuery实现滚动刷新效果

    Jquery实现简单的滚动刷新效果: 实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果 HTML正文: &lt;form id="form1" runat="server"&gt; &lt;/form&gt; Javascript操作代码: $(document)....

    Ajax无刷新表单输入检测验证 基于jQuery.rar

    Form Of Notifications一款来自国外的 jquery Ajax表单输入检测验证一例,如果输入有错误当即给出提示,表单并不能提交,体升用户体验的好方法,Ajax一定要学习一下哦,jQuery是实现Ajax的快速平台,有必要掌握哦。

    Jquery基于Ajax方法自定义无刷新提交表单Form实例

    本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法。分享给大家供大家参考。具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等。 如果要提交现有Form需要写很多代码,...

    jquery+ajax无刷新评论源码

    jquery+ajax无刷新评论源码 实现了获取评论无刷新,发表评论无刷新,页面获取评论时显示loading加载效果 jquery真的是一个非常优秀的JS库,简单容易掌握,对于网页中的多级菜单、级联效果、Tab选项卡切换、图片...

    jquery.form.min.js

    jqueryForm ajaxForm 无刷新提交form

    Jquery validate和form插件

    Jquery validate和form两个插件,完美进行表单验证和Ajax无刷新方式提交form表单,很有用的哦。

    jquery.unobtrusive-ajax.rar

    jquery.unobtrusive-ajax 一个Ajax 异步刷新的脚本 具体方法在我的主页,大家可以看一下,如有疑问,欢迎留言

    jQuery+AJAX+ASP无刷新提交、删除、翻页实例

    内容索引:ASP源码,Ajax相关,无刷新提交,无刷新表单,Ajax 很不错的一个在ASP中应用jQuery框架的AJAX实例,它的功能是完成一个无刷新提交、删除并翻页的评论程序,发表评论时同样可以无刷新判断输入信息是否正确,...

Global site tag (gtag.js) - Google Analytics