jQuery ajax 請求和 Submit 提交 form 表單

阿新 • • 發佈：2019-01-17

前臺：

<title>modify approver Password</title>
<script type="text/javascript">
$(document).ready(function(){
	
	var oldPass = $("#oldPassword");
	var pass = $("#password");
	var rePass = $("#rePassword");
	$("#content").hide("slow");
	//檢查要提交的修改密碼錶單	   
	 $("#passForm").submit(function() {
		//flag用於判斷是否提交表單
		 var flag = false;
		 if(oldPass.val() == '') {
		 	alert("請輸入您的原始密碼！");
		 	oldPass[0].focus();
		 	return false;
		 }else if(rePass.val() != pass.val()){
			$("#content").show("slow");
			rePass[0].focus();
			return false;
		 }else if(rePass.val() == '' || pass.val() == ''){
			 alert("請輸入您的新密碼！");
			 return false;
		 }else{
			$.ajax({
		        type : 'GET',
		        contentType : 'application/json',
		        url : '${ctx}/approverPassword/checkPassword.do',
		        data: 'oldPass=' + oldPass.val(),
		        dataType : 'text',
		        //同步
		        async : false,
		        success : function(data) {
		        	if("false" == data) {
		        		alert("原始密碼輸入錯誤！");
		        		oldPass.val('');
		        		oldPass[0].focus();
		        		flag = false;
		        	}else if("true" == data) {
		        		flag = true;
		        	}
		        },
		        error : function() {
			    	alert("修改密碼錯誤，請重新輸入");
			    	flag = false;
			    }
			});
		 }
		/*  if(flag) {
			alert("密碼修改成功，請您重新登入！"); 
		 } */
		 return flag;
	 });
	
});
</script>
</head>
<body>
	modify approver password.<br/>
	<form action="${ctx}/approverPassword/modifyUserPassword.do" id="passForm" name="passForm"  method="post">
		<table>
			<tr><td><input type="hidden" id="userId" name="userId" value="${user.id }"> </td></tr>
			<tr>
				<td>原始密碼：</td>
				<td><input type="text" id="oldPassword" name="oldPassword" maxlength="20"/> </td>
			</tr>
			<tr>
				<td>新密碼：</td>
				<td><input type="password" id="password" name="password" maxlength="20"/></td>
			</tr>
			<tr>
				<td>再次輸入新密碼：</td>
				<td>
					<input type="password" id="rePassword" name="rePassword" maxlength="20" />
					<span id="content" style="font-size: 12px; color:red;">兩次輸入的密碼不一樣</span>
				</td>
			</tr>
			<tr>
				<td><input type="submit" id="submit" name="submit" value="submit"/></td>
				<td><input type="button" id="cancel" name="cancel" value="cancel"/></td>
			</tr>
		</table>
	</form>
</body>

後臺：

	/**
	 * check User password 
	 * @param request
	 * @param response
	 * @return ModelAndView
	 */
	@RequestMapping(value="/userPassword/checkPassword", method={RequestMethod.GET, RequestMethod.POST})
	@ResponseBody
	public String checkPassword(@RequestParam("oldPass") String oldPass) {
		String flag1 = "false";
		//取得當前使用者的密碼
		long id = SecurityUtil.getUserSession().getId();
		User user = userService.findById(id);
		String password = user.getPassword();
		//從介面接收的舊密碼
		String oldPassword = Md5.createMD5Password(oldPass);
		//兩個密碼進行比較
		if(oldPassword.equals(password)) {
			flag1 = "true";
		}else{
			flag1 = "false";
		} 
		return flag1;
	}

/**
  * modify user password
  * @return ModelAndView
  */
 @RequestMapping(value="/userPassword/modifyUserPassword", method={RequestMethod.GET, RequestMethod.POST})
 public ModelAndView modifyUserPassword(HttpServletRequest request, HttpServletResponse response) {
  ModelAndView mv = new ModelAndView("redirect:/login/goIndexPage.do");
  ModelAndView mv1 = new ModelAndView("passwordError");
  //獲取引數
  String oldPass = request.getParameter("oldPassword");
  long id = Long.valueOf(request.getParameter("userId"));
  String password = request.getParameter("rePassword");
  //對String型別的密碼進行Md5加密
  String Md5Password = Md5.createMD5Password(password);
  //得到要修改的實體
  User user = userService.findById(id);
  //根據user實體user1在表user_access_role表中查詢一個UserAccessRole實體 1(user):1(accessRole)
  List<UserAccessRole> list = this.userAccessRoleService.getAccessRoleId("user", user);
  //從list<UserAccessRole>取出實體accessRole
  AccessRole accessRole = list.get(0).getAccessRole();
  //得到實體accessRole的角色名name id
  String roleName = accessRole.getName();
  long roleId = accessRole.getId();
  user.setPassword(Md5Password);
  //判斷許可權
  if(roleId == userAccessRoleService.USER_ACCESS_ROLE_ID && "true".equals(this.checkPassword(oldPass))) {
   //1.修改pccw_iaas表中的userPassword
   userService.merge(user);
   //2.修改cloud表中的userPassword
   cloudStackUserService.modifyCloudStackUserPassword(user.getCloudUserId(), user.getUserName(), Md5Password);
   return mv;
  }else {
   return mv1;
  }
 }

jQuery ajax 請求和 Submit 提交 form 表單

前臺： <title>modify approver Password</title> <script type="text/javascript"> $(document).ready(function(){ var oldPas

jQuery實現文字框回車鍵提交form表單

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>131</title><script src="http://ajax.aspne

關於jQuery中button標籤自動提交form表單的問題

在form表單中,當我們將button標籤作為事件源,使用jQuery對其繫結一個事件,來造作多選框的同步多選,反選,或者解析輸入文字進而匹配相應選項設定時會發現,在點選button之後,結果會出現,但卻一閃而過.這是為什麼嘛呢?當我們將form表單的"Method" 屬性設

如何通過submit提交form表單獲取後臺傳來的返回值

小夥伴是不是遇到過這樣的問題，通過submit提交form表單的時候，不知怎麼獲取後臺傳來的返回值。有的小夥伴就會說你不會發送ajax，其實小編也會。假如提價的form表單中含有檔案，怎麼辦？（注：

提交form表單---修改密碼 ajax、jQuery

改密 func 表單 eset password servlet 驗證確認密碼密碼 <form id ="password" method="post"> 　　<table > <tr> 　　<td>原密碼:<

JQuery ajax提交form表單實現檔案上傳

<!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.bootcss.co

自定義submit（）實現ajax提交form表單不重新整理跳轉

問題描述： 1.最近一直在為使用者資訊完善功能所困惑，想要實現：使用者提交資訊後不跳轉到acction()的服務端頁面，只要告訴提交成功即可。 2.論壇上大多ajax+json等方法/框架（$ajaxform）都需要匯入包或者js檔案，本人新手，對於導

mip ajax jsonp 非同步請求更多載入 form表單提交

.mip-a-74{width:100%}.mip-div-96{text-indent:2em;height:10rem;overflow:hidden}.mip-section-251{margin:10px 12px 10px}.mip-img-256{width:100%;heigh

使用ajax提交form表單，包括ajax文件上傳轉http://www.cnblogs.com/zhuxiaojie/p/4783939.html

ima option img jquery選擇器 open request resp logs ges 使用ajax提交form表單，包括ajax文件上傳前言使用ajax請求數據，很多人都會，比如說： $.post(path,{data:data},function

工作中如何使用ajax提交form表單,包括ajax文件上傳

msu 包括需要 java tip ror 存儲 adf ucc 提供一種方法就是利用jquery.form.js，我們是和java對接的後臺。代碼如下： <input type="text" id="text1"> <input type="text

AJAX PHP無刷新form表單提交的簡單實現(推薦)

username mime win root 支持對象希望 meta {} 下面小編就為大家帶來一篇AJAX PHP無刷新form表單提交的簡單實現(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 ajax.php <

三層+EasyUI+Ajax 提交Form表單

log src body 提交 easy orm img yui class 三層+EasyUI+Ajax 提交Form表單

使用ajax提交form表單，包括ajax文件上傳

開發者使用 sub 決定發現 cli 也會 pos pre 前言使用ajax請求數據，很多人都會，比如說：$.post(path,{data:data},function(data){ ...},"json");又或者是這樣的ajax$.ajax({

使用ajax提交form表單

使用FormData物件 FormData物件是html5的一個物件，目前的一些主流的瀏覽器都已經相容，非常的強大 FormData可以憑空建立一個物件，然後往這個物件裡面新增資料，然後直接提交，不需要寫一行html程式碼，如下： var form = new FormData(); form.appe

ajax提交form表單，H5的required屬性沒起作用

1、 ajax提交form表單，required屬性不起作用錯誤程式碼如下 <form id="order"> <input type="text" name="name" required /> <input type="submit

ajax 提交form表單的檔案上傳

搞檔案上傳，要麼使用檔案上傳控制元件！先非同步上傳之後獲取上傳之後的檔案內容，最後再把檔案資訊和其他相關內容一起提交給後臺。要麼就是一個 form表單，把檔案和其他資訊一把都傳向後臺！但是form表單上傳之後，往往都是會跳轉頁面的。所以就想要可以ajax 上傳檔案。百度

ajax提交form表單問題

form表單提交資料可以省下大量大量獲取元素的程式碼，區域性重新整理時也可以用ajax提交form表單，但是要先把表單序列化，再把後臺javaBean物件序列化，但是你有可能前後臺都執行了系列化，但是後臺還是接受不到物件，會出現400錯誤，400錯誤為請求錯誤，很多時候是引數異常，表單序列化出現400錯誤，很

jdngao+bootstrap的ajax提交form表單Demo

jdngao+bootstrap的ajax提交form表單Demo，完整例項程式碼： 1，html程式碼 {% load bootstrap3 %} <form enctype="multipart/form-data" id="form" method="post" cla

Ajax應用serialize()提交Form表單及後端取值（Java）

ajax提交form表單，包括ajax檔案上傳

使用ajax請求資料，很多人都會，比如說： $.post(path,{data:data},function(data){ ... },"json"); 又或者是這樣的ajax $.ajax({ url:"${pageCont

jQuery ajax 請求 和 Submit 提交 form 表單

相關推薦

jQuery ajax 請求和 Submit 提交 form 表單