"와 같습니다."/> "와 같습니다.">
jquery.form.js는 ajax 양식 제출 및 ajax 파일 업로드를 지원하는 양식 플러그인입니다. 해당 참조 방법은 "8f537151dbb35229fea73b1ffc9e46416fa91e54c07be4a78b6848fe0cbd1161" .
이 기사의 운영 환경: windows7 시스템, jquery 버전 1.6.2, DELL G3 컴퓨터
jquery.form.js가 무엇인가요?
jQuery.form.js 사용
jQuery.form.js는 Ajax 양식 제출 및 Ajax 파일 업로드를 지원하는 양식 플러그인입니다.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.6.2.js"></script> <script src="~/Scripts/jQuery.form.js"></script> </head> <body> <div> <form id="ajaxForm" method="post" action="/Home/Index" enctype="multipart/form-data"> <input type="text" name="name" /> <input type="text" name="sex" /> <input type="file" name="file" /> <button type="submit" id="btnSubmit">提交1</button> </form> <button id="btnButton" type="button">提交2</button> </div> <script type="text/javascript"> $(function () { $("#ajaxForm").ajaxForm(function () { alert("提交成功1"); }); $("#ajaxForm").submit(function () { $(this).ajaxSubmit(function () { alert("提交成功1"); }); return false; }); $("#btnButton").click(function () { $("#ajaxForm").ajaxSubmit(function () { alert("提交成功2"); }); return false; }); }); </script> </body> </html>
ajaxForm | Ajax 양식 제출을 준비하는 데 필요한 모든 이벤트 리스너를 추가하세요. ajaxForm이 양식을 제출할 수 없습니다. 문서의 준비 기능에서 ajaxForm을 사용하여 양식의 Ajax 제출을 준비합니다. | 0 또는 1개의 매개변수를 허용합니다. 매개변수는 콜백 함수 또는 옵션 객체일 수 있습니다. | $("#formid").ajaxForm(); |
ajaxSubmit | ajax를 사용하여 양식을 제출하세요. | 0 또는 1개의 매개변수를 허용합니다. 매개변수는 콜백 함수 또는 옵션 객체일 수 있습니다. |
$("#formid").ajaxSubmit(); 또는 $("#formid").submit(function(){ $(this).ajaxSubmit(); return false; }); |
formSerialize | 양식을 쿼리 문자열로 직렬화(또는 직렬화)합니다. 이 메소드는 name1=value1&name2=value2 형식의 문자열을 반환합니다. | None | $("#formid").formSerialize(); |
fieldSerialize | 양식의 필드 요소를 쿼리 문자열로 직렬화(또는 직렬화)합니다. 이는 일부 양식 필드만 직렬화(또는 직렬화)해야 하는 경우에 편리합니다. 이름=값1&이름2=값2 형식의 문자열을 반환합니다. | None | $("#formid .specialFields").fieldSerialize(); |
fieldValue | 삽입된 배열과 일치하는 양식 요소 값을 반환합니다. 이 메서드는 배열 형식으로 데이터를 반환합니다. 요소 값이 잠재적으로 유효하지 않은 것으로 확인되면 배열은 비어 있습니다. | None | $("#formid :password").fieldValue(); |
resetForm | 양식을 초기 상태로 복원합니다. | None | $("#formid").resetForm(); |
clearForm | 양식 요소를 지웁니다. 이 메소드는 모든 텍스트, 비밀번호 및 텍스트 영역을 비우고 선택 요소의 선택을 지우며 모든 라디오 버튼과 체크박스 버튼을 선택되지 않은 상태로 재설정합니다. | None | $("#formid").clearForm(); |
clearFields | 필드 요소를 지웁니다. 일부 양식 요소만 지워야 할 때 편리합니다. | None | $("#formid .specialFields").clearFields(); |
Options 객체
ajaxForm과 ajaxSubmit 모두 Options 객체를 사용하여 제공할 수 있는 다양한 옵션 매개변수를 지원합니다.
target | 서버에 대한 응답으로 업데이트되는 페이지의 요소를 나타냅니다. 요소의 값은 jQuery 선택기 문자열, jQuery 객체 또는 DOM 요소로 지정될 수 있습니다. | 기본값: null |
url | 양식 데이터 제출을 위한 URL을 지정하세요. | 기본값: 양식의 작업 속성 값 |
type | 양식 데이터를 제출하는 방법을 지정합니다: "GET" 또는 "POST". | 기본값: GET |
beforeSubmit | 양식이 제출되기 전에 호출되는 콜백 함수입니다. 콜백 함수가 false를 반환하면 양식이 제출되지 않습니다. 콜백 함수는 세 가지 호출 매개변수, 즉 배열 형태의 양식 데이터, jQuery 양식 객체, ajaxForm/ajaxSubmit에 전달된 옵션 객체를 사용합니다. | 기본값: null |
success | 양식이 성공적으로 제출된 후 호출되는 콜백 함수입니다. 그런 다음 dataType 옵션 값은 responseText 또는 responseXML 값이 반환되는지 여부를 결정합니다. | 기본값: null |
dataType | 반환된 데이터 유형: null, "xml", "script", "json" 중 하나. | 기본값: null |
resetForm | 은 양식이 성공적으로 제출된 경우 재설정할지 여부를 나타냅니다. | 기본값: null |
clearForm | 은 양식이 성공적으로 제출된 경우 양식 데이터를 지울지 여부를 나타냅니다. |
var options={ target : '#output', // 把服务器返回的内容放入id为output的元素中 beforeSubmit : showRequest, // 提交前的回调函数 success : showResponse, // 提交后的回调函数 // url : url, //默认是form的action,如果申明,则会覆盖 // type : type, // 默认值是form的method("GET" or "POST"),如果声明,则会覆盖 // dataType : null, // html(默认)、xml、script、json接受服务器端返回的类型 // clearForm : true, // 成功提交后,清除所有表单元素的值 // resetForm : true, // 成功提交后,重置所有表单元素的值 timeout : 3000 // 限制请求的时间,当请求大于3秒后,跳出请求 } function showRequest(formData, jqForm, options){ // formData: 数组对象,提交表单时,form插件会以ajax方式自动提交这些数据,格式如[{name:user,value:val},{name:pwd,value:pwd}] // jqForm: jQuery对象,封装了表单的元素 // options: options对象 var queryString=$.param(formData); // name=1&address=2 var formElement=jqForm[0]; // 将jqForm转换为DOM对象 var address=formElement.address.value; // 访问jqForm的DOM元素 return true; // 只要不返回false,表单都会提交,在这里可以对表单元素进行验证 } function showResponse(responseText,statusText){ // dataType=xml var name=$("name",responseXML).text(); var address=$("address",responseXML).text(); $("#xmlout").html(name+" "+address); // dataType=json $("#jsonout").html(data.name+" "+data.address); }
추천 학습: "jquery 비디오 튜토리얼"
위 내용은 jquery.form.js 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!