jquery ajax 實現表單提交和驗證表單
阿新 • • 發佈：2018-11-23
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <title>$.ajax()方法傳送請求</title> <!-- <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script> --> <!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/core.js"></script> --> <script src="https://cdn.bootcss.com/jquery/1.4.4/jquery.min.js"></script> <style type="text/css"> body { font-size: 13px; } .divFrame { width: 225px; border: solid 1px #666; } .divFrame .divTitle { padding: 5px; background-color: #eee; height: 23px; } .divFrame .divTitle span { float: left; padding: 2px; padding-top: 5px; } .divFrame .divContent { padding: 8px; text-align: center; } .divFrame .divContent .clsShow { font-size: 14px; line-height: 2.0em; } .divFrame .divContent .clsShow .clsError { font-size: 13px; border: solid 1px #cc3300; padding: 2px; display: none; margin-bottom: 5px; background-color: #ffe0a3; } .txt { border: #666 1px solid; padding: 2px; width: 150px; margin-right: 3px; } .btn { border: #666 1px solid; padding: 2px; width: 50px; } </style> <script type="text/javascript"> $(function(){ $("#txtName").focus();//輸入焦點 $("#txtName").keydown(function (event) { if (event.which == "13") {//回車鍵,移動游標到密碼框 $("#txtPass").focus(); } }); $("#txtPass").keydown(function (event) { if (event.which == "13") {//回車鍵，用.ajax提交表單 $("#btnLogin").trigger("click"); } }); $("#btnLogin").click(function () { //“登入”按鈕單擊事件 //獲取使用者名稱稱 var strTxtName = encodeURI($("#txtName").val()); //獲取輸入密碼 var strTxtPass = encodeURI($("#txtPass").val()); //開始傳送資料 $.ajax ({ //請求登入處理頁 type: "GET",//請求方式 "POST" 或 "GET"， 預設為 "GET" url: "login.jsp", //登入處理頁 dataType: "html", //傳送請求資料 data: { txtName: strTxtName, txtPass: strTxtPass }, success: function (strValue) { //登入成功後返回的資料 //根據返回值進行狀態顯示 if (strValue == "True") {//注意是True,不是true $(".clsShow").html(strValue); } else if (strValue != "True"){ $("#divError").show().html( strValue); } } }) }) }) </script> </head> <body> <form id="frmUserLogin"> <div class="divFrame"> <div class="divTitle"> <span>使用者登入</span> </div> <div class="divContent"> <div class="clsShow"> <div id="divError" class="clsError"> </div> <div> 名稱：<input id="txtName" type="text" class="txt" /></div> <div> 密碼：<input id="txtPass" type="password" class="txt" /></div> <div> <input id="btnLogin" type="button" value="登入" class="btn" />   <input id="btnReset" type="reset" value="取消" class="btn" /> </div> </div> </div> </div> </form> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <% String strName = request.getParameter("txtName"); String strPass = request.getParameter("txtPass"); boolean login = false; if(strName.equals("uid")&&strPass.equals("pwd")){ login = true; } out.print(login); %> </body> </html>
