http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html# 1. 페이지에 양식을 작성합니다. 일반적인 형식이며 특별한 마크업이 필요하지 않습니다. 코드 복사 코드는 다음과 같습니다. 이름: 비밀번호:<입력 유형= " submit" value="submit async" id="lnkSubmit" /> Jquery.Form 구성 요소 없음 양식을 제출하면 페이지가 차단 모드로 들어가 서버의 응답을 기다립니다. 2. jQuery 및 양식 플러그인 Javascript 스크립트 파일을 소개하고 DOM이 로드된 후 페이지가 양식을 초기화할 수 있도록 몇 가지 간단한 코드를 추가합니다. <br>// DOM이 로드될 때까지 기다립니다. <br>$ (문서).ready(function() { > 의견을 보내주셔서 감사합니다!"); <br>}); 🎜></ head> <br>jquery.form 구성 요소를 추가한 후 양식을 제출하면 페이지가 더 이상 동기적으로 제출되지 않고 js에 의해 비동기적으로 제출되므로 제출 후 페이지가 새로 고쳐지지 않습니다. <br> <br>3. 서버와 상호작용할 수 있는 콜백 함수를 추가합니다. <br><br><br><br><br>코드 복사</p> <p><br> 코드는 다음과 같습니다.</p> <div class="codetitle"> <div class="codebody" id="code90447"> <br>$(document).ready(function () { <br> //options是一个ajaxForm적配置对象。<br> var options = { <br> //대상: '#output1', // 서버 응답으로 업데이트할 대상 요소 <br> //beforeSubmit: showRequest, // 사전 제출 콜백 <br> <FONT color=#ff0000> 성공: callBackFunc // 제출 후 콜백</ FONT> <br><br> // 기타 사용 가능한 옵션: <br> //url: url // 양식의 'action' 속성에 대해 재정의 <br> //type: type // 'get' 또는 'post', 재정의 양식의 'method' 속성 <br> //dataType: null // 'xml', 'script' 또는 'json'(예상 서버 응답 유형) <br> //clearForm: true // 성공 후 모든 양식 필드 지우기 submit <br> //resetForm: true // 성공적인 제출 후 양식 재설정 <br><br> // 여기에서도 $.ajax 옵션을 사용할 수 있습니다. 예를 들면 다음과 같습니다. <br> //timeout: 3000 <br> } ; <br><br> // 'ajaxForm'을 사용하여 양식 바인딩 <br> $('#myForm').ajaxForm(options); <br>}); <p> // responseText是服务端的响应值。statusText是页면 </p> <p> // 提交状态值，success表示成功。 <br>function callBackFunc(responseText, statusText) { <br> if (statusText == 'success') { <br> Alert(responseText); <br> } </p> <p> 그밖에{ </p> <p> alert(“服务端错误!”); </p> <p> } <br>} </p> <p>如果返回的是json数据则回调函数可以这么写 <br>function resultFunction(responseText,statusText) { <br> if (statusText == 'success') { if (responseText.code == 1 ) { <br> 경고(responseText.message); <br> } <br> else { <br> Alert('오류 발생!'); <br> } <br> } <br> else { <br> Alert('服务器错误!'); <br> } <br> } <br><br></p> </div>服务端적 代码如下：<br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="68420" class="copybut" id="copybut68420" onclick="doCopy('code68420')">复主代码<u></u></a> 代码如下:</span></div> <div class="codebody" id="code68420">[HttpPost] <br>public ActionResult AjaxForm(FormCollection form) <br>{ <br> string message = "이름:" form["username"] " PWD: " form[" 비밀번호"] ; <br> //콘텐츠(메시지) 반환; <br> return Json(new { code = 1, message = message }); <br>} <br><br> </div>4. 加入提交前的数据校验函数 <br>为options对象添加 before제출属性<br><br><div class="codetitle"><span>复主代码<a style="CURSOR: pointer" data="7941" class="copybut" id="copybut7941" onclick="doCopy('code7941')"><u></u> 代다운로드:</a><div class="codebody" id="code7941"> <br>var options = { <br> //대상: '#output1', // 서버 응답으로 업데이트할 대상 요소 <br> <FONT color=#ff0000>beforeSubmit: checkData, // 사전 제출 콜백 <br></FONT> 성공: callBackFunc // 제출 후 콜백 <br><br> // 기타 사용 가능한 옵션: <br> //url: url // 양식의 'action' 속성 재정의 <br> //유형: 유형 // 'get ' 또는 'post', 양식의 'method' 속성 재정의 <br> //dataType: null // 'xml', 'script' 또는 'json'(예상 서버 응답 유형) <br> //clearForm: true / / 제출 성공 후 모든 양식 필드 지우기 <br> //resetForm: true // 제출 성공 후 양식 재설정 <br><br> // 여기에서도 $.ajax 옵션을 사용할 수 있습니다. 예를 들면 다음과 같습니다. <br> // 시간 초과: 3000 <br> }; <br> // 콜백 사전 제출 <br> function checkData(formData, jqForm, options) { <br> // formData는 배열입니다. 여기서는 $.param을 사용하여 문자열로 변환하여 표시합니다. <br> // 하지만 양식 플러그인은 데이터를 제출할 때 자동으로 이 작업을 수행합니다. <br> //var queryString = $.param(formData); <br><br> // jqForm은 양식 요소를 캡슐화하는 jQuery 객체입니다. <br> // 양식의 DOM 요소에 액세스하려면 다음을 수행하세요. <br> var formElement = jqForm[0]; <br><br> //alert('제출 예정: nn' queryString); <br><br> // 여기서는 양식이 제출되지 않도록 false를 반환할 수 있습니다. <br> // false가 아닌 값을 반환하면 양식 제출을 계속할 수 있습니다. <br> //true를 반환합니다. <br> if ($(formElement).find("#username").val() == "") { <br> Alert("사용자 이름을 입력하세요!"); <br> false를 반환합니다. <br> } else { <br> true를 반환합니다. <br> } <br> } <br> </div> <br>验证用户name是否为空，是则提示输入，并取消表单提交。</span></div> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
