Jquery.Form 비동기 양식 submit_jquery의 간단한 예

http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#

1. 페이지에 양식을 작성합니다. 일반적인 형식이며 특별한 마크업이 필요하지 않습니다.

코드 복사 코드는 다음과 같습니다. 이름: 비밀번호:

Jquery.Form 구성 요소 없음 양식을 제출하면 페이지가 차단 모드로 들어가 서버의 응답을 기다립니다. 2. jQuery 및 양식 플러그인 Javascript 스크립트 파일을 소개하고 DOM이 로드된 후 페이지가 양식을 초기화할 수 있도록 몇 가지 간단한 코드를 추가합니다.

// DOM이 로드될 때까지 기다립니다. $ (문서).ready(function() { > 의견을 보내주셔서 감사합니다!"); }); 🎜> jquery.form 구성 요소를 추가한 후 양식을 제출하면 페이지가 더 이상 동기적으로 제출되지 않고 js에 의해 비동기적으로 제출되므로 제출 후 페이지가 새로 고쳐지지 않습니다.

3. 서버와 상호작용할 수 있는 콜백 함수를 추가합니다.

코드 복사

코드는 다음과 같습니다.

$(document).ready(function () { //options是一个ajaxForm적配置对象。 var options = { //대상: '#output1', // 서버 응답으로 업데이트할 대상 요소 //beforeSubmit: showRequest, // 사전 제출 콜백 성공: callBackFunc // 제출 후 콜백

// 기타 사용 가능한 옵션: //url: url // 양식의 'action' 속성에 대해 재정의 //type: type // 'get' 또는 'post', 재정의 양식의 'method' 속성 //dataType: null // 'xml', 'script' 또는 'json'(예상 서버 응답 유형) //clearForm: true // 성공 후 모든 양식 필드 지우기 submit //resetForm: true // 성공적인 제출 후 양식 재설정

// 여기에서도 $.ajax 옵션을 사용할 수 있습니다. 예를 들면 다음과 같습니다. //timeout: 3000 } ;

// 'ajaxForm'을 사용하여 양식 바인딩 $('#myForm').ajaxForm(options); }); // responseText是服务端的响应值。statusText是页면

// 提交状态值，success表示成功。 function callBackFunc(responseText, statusText) { if (statusText == 'success') { Alert(responseText); }

그밖에{

alert(“服务端错误!”);

} }

如果返回的是json数据则回调函数可以这么写 function resultFunction(responseText,statusText) { if (statusText == 'success') { if (responseText.code == 1 ) { 경고(responseText.message); } else { Alert('오류 발생!'); } } else { Alert('服务器错误!'); } }

服务端적 代码如下：

复主代码 代码如下: [HttpPost] public ActionResult AjaxForm(FormCollection form) { string message = "이름:" form["username"] " PWD: " form[" 비밀번호"] ; //콘텐츠(메시지) 반환; return Json(new { code = 1, message = message }); }

4. 加入提交前的数据校验函数 为options对象添加 before제출属性

复主代码 代다운로드: var options = { //대상: '#output1', // 서버 응답으로 업데이트할 대상 요소 beforeSubmit: checkData, // 사전 제출 콜백 성공: callBackFunc // 제출 후 콜백

// 기타 사용 가능한 옵션: //url: url // 양식의 'action' 속성 재정의 //유형: 유형 // 'get ' 또는 'post', 양식의 'method' 속성 재정의 //dataType: null // 'xml', 'script' 또는 'json'(예상 서버 응답 유형) //clearForm: true / / 제출 성공 후 모든 양식 필드 지우기 //resetForm: true // 제출 성공 후 양식 재설정

// 여기에서도 $.ajax 옵션을 사용할 수 있습니다. 예를 들면 다음과 같습니다. // 시간 초과: 3000 }; // 콜백 사전 제출 function checkData(formData, jqForm, options) { // formData는 배열입니다. 여기서는 $.param을 사용하여 문자열로 변환하여 표시합니다. // 하지만 양식 플러그인은 데이터를 제출할 때 자동으로 이 작업을 수행합니다. //var queryString = $.param(formData);

// jqForm은 양식 요소를 캡슐화하는 jQuery 객체입니다. // 양식의 DOM 요소에 액세스하려면 다음을 수행하세요. var formElement = jqForm[0];

//alert('제출 예정: nn' queryString);

// 여기서는 양식이 제출되지 않도록 false를 반환할 수 있습니다. // false가 아닌 값을 반환하면 양식 제출을 계속할 수 있습니다. //true를 반환합니다. if ($(formElement).find("#username").val() == "") { Alert("사용자 이름을 입력하세요!"); false를 반환합니다. } else { true를 반환합니다. } } 验证用户name是否为空，是则提示输入，并取消表单提交。