jquery.form.js는 양식 제출을 ajax submit_jquery로 변환하는 방법을 실현합니다.

이 기사의 예에서는 양식 제출을 Ajax 제출로 변환하는 jquery.form.js의 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

이 프레임워크에는 양식 제출, 확인, 업로드 기능이 통합되어 있습니다.
이 프레임워크는 jquery의 전체 버전과 결합되어야 합니다. 그렇지 않으면 min을 사용할 수 없습니다.
원칙: js를 사용하여 양식을 ajax URL과 데이터로 조합합니다. 원칙은 여전히 ​​ajax를 사용하여 제출하는 것입니다. 실제로 직접 작성할 수도 있지만 이 프레임워크를 사용하면 더 간단할 수 있습니다.

1. 가장 간단한 예:

1단계: js 인용

<!--这里的min是自己用js压缩工具对完整版进行的压缩
并不是真正的min，所以好使-->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

2단계: 페이지에 양식 작성

<form id="showDataForm" 
action="/024pm/f_shopUser.do&#63;method=login" method="post">
 <input type="text" value="" name="name" maxlength="2"/>
 <input type="password" value="" name="password" maxlength="2"/>
 <input type="submit" value="提交"/>
</form>
<div id="output1" 
style="width:1000px;height:200px;background-color:#eee;">
</div>

3단계: jquery.form.js를 호출하도록 js를 작성하고 ajax로 양식을 제출합니다.

$(document).ready(function() {
 var options = {
  target: '#output1',
  // 从服务传过来的数据显示在这个div内部
 也就是ajax局部刷新
  beforeSubmit: showRequest,
 // ajax提交之前的处理
  success:  showResponse
 // 处理之后的处理
 };
 $('#showDataForm').submit(function() {
  $(this).ajaxSubmit(options);
  return false; 
  //非常重要，如果是false，则表明是不跳转
  //在本页上处理，也就是ajax，如果是非false，则传统的form跳转。
 });
});
function showResponse(responseText, statusText, xhr, $form) {
 alert(xhr.responseText+"=="+$form.attr("method")+'status: ' + 
 statusText + '\n\nresponseText: \n' + responseText);
//xhr：说明你可以用ajax来自己再次发出请求
//$form：是那个form对象，是一个jquery对象
//statusText：状态，成功则为success
//responseText，服务器返回的是字符串（当然包括html，不包括json）
}
function showRequest(formData, jqForm, options) {
 //formData是数组，就是各个input的键值map数组
 //通过这个方法来进行处理出来拼凑出来字符串。
 //formData：拼凑出来的form字符串，比如name=hera&password，
 //其实就是各个表单中的input的键值对，
 //如果加上method=XXXX，那也就是相当于ajax内的data。
 var queryString = $.param(formData);
 alert(queryString+"======"+formData.length);
 for (var i=0; i < formData.length; i++) {
 alert(formData[i].value+"==============="+formData[i].name);
 }
 //jqForm，jquery form对象
 var formElement = jqForm[0];
 alert($(formElement).attr("method"));
 alert($(jqForm[0].name).attr("maxlength"));
 //非常重要，返回true则说明在提交ajax之前你验证
 //成功，则提交ajax form
 //如果验证不成功，则返回非true，不提交
 return true;
}

2. 옵션 개체의 값은 무엇인가요?

일반적으로 사용되는 몇 가지 주요 속성은 다음과 같습니다.

var options = {
 target: '#output1', 
 data:{param1:"我自己的第一个额外的参数"},
//这个参数是指通过ajax来给服务器提交除了form内部input的参数
//在后台中使用String param1=req.getParameter("param1");获取。
 // dataType: null,
 dataType:'json',
//这个参数值的是服务器返回的数据类型，默认的是null
//也就是服务器可以默认返回字符串，然后将这些字符串放在target内部
//当然还有json、xml，其中最常用的便是null和json
//对于json的使用，我们会稍后讲解到
 beforeSubmit: showRequest,
 success:  successRes，
 type：'POST'
 //提交方式，默认是自己在form标签上指定的method
 //如果没有指定，则使用get。
 url：''
 //重新提交的url，即url可以在form中配置
 //也可以在这里配置。
};

3. 서버에서 전달한 json 데이터를 파싱하는 방법

jquery에서 제공하는 ajax 메소드를 사용하면 서버가 json 데이터를 다시 전달하면 js의 json 객체로 변환되고 json.xxx를 통해 해당 값을 얻을 수 있다는 것을 알고 있습니다. 그렇다면 이 프레임워크는 어떨까요?
1) 먼저 옵션 매개변수에 dataType을 지정합니다: 'json'
2) 프레임워크를 통해 제출
3) 서버가
을 수신합니다. 4) 서버가 json을 반환합니다
5) 페이지 js가 json을 수신합니다
핵심은 다섯 번째 단계입니다. js를 통해 json을 수신하는 방법은 성공으로 지정된 메서드 내에서 다음 작업을 수행하여 수행할 수 있습니다.

var options = {
 target: '#output1', 
 dataType:'json',
 beforeSubmit: showRequest,
 success:  successRes
//注意了，successRes方法看起来并没有有参数
//但是为何下面的方法就能有参数了呢，是可以这么传递的。
function successRes(jsonData){
 alert(jsonData.param1);
}

4. 이 프레임워크를 통해 간단한 검증을 수행하는 방법은 무엇입니까?

검증에 관해서는 beforeSubmit 메서드 내에서 검증해야 합니다. 검증 방법은 이 메서드가 jqform 개체와 formData를 전달했기 때문에 이 두 매개변수를 사용하여 해당 입력을 얻은 다음 자체적으로 만들 수 있습니다. 판결이 성공하면 제출하십시오.

function showRequest(formData, jqForm, options) {
 for (var i=0; i < formData.length; i++) {
 alert(formData[i].value+"========"+formData[i].name);
 if (!formData[i].value) {
  //验证是否填写完整
  alert('input有没有填写的选项');
  //如果验证不通过，则返回false
  return false;
 }
 }
 var formElement = jqForm[0];
 alert($(jqForm[0].name).attr("maxlength"));
 return true;
}

jquery.form.js 파일을 보려면 여기를 클릭하세요

이 사이트에서 다운로드하세요.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.