jQuery ajax 제출 양식 양식 예시(데모 소스 코드 포함)_jquery

이 기사의 예에서는 양식 양식을 제출하는 jQuery ajax 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

Jquery의 $.ajax 메소드는 ajax 호출을 구현하고 URL, 게시물, 매개변수 등을 설정할 수 있습니다.

기존 양식을 제출하기 위해 많은 코드를 작성해야 한다면 양식 제출을 직접 Ajax로 전송하는 것이 좋습니다.

이전 처리방법

예를 들어 양식 코드는 다음과 같습니다.

<form id="Form1" action="action.aspx" method="post" >
名称：<input name="name" type="text" /><br />
密码：<input name="password" type="password" /><br />
手机：<input name="mobile" type="text" /><br />
说明：<input name="memo" type="text" /><br />
<input type="submit" value="提 交" />
</form>

제출되면 action.aspx 페이지로 이동됩니다. 그리고 Request.Params["name"]을 통해 값을 얻을 수 있습니다.

생각

ajax를 사용하여 페이지를 새로 고치고 싶지 않다면 $.ajax에 URL과 기타 정보를 지정해야 하는데 이는 유지 관리가 어렵습니다.

온라인으로 확인해 보니 외국인들이 오래전에 해결책을 갖고 있었던 것 같아요. Form 정보에 따라 직접 제출하려면 ajax를 사용하세요. 페이지를 새로 고치지 않습니다.

참고: http://jquery.malsup.com/form/

매우 유용하지만, 그래도 직접 써보고 싶습니다.

핵심 JS 코드

//将form转为AJAX提交
function ajaxSubmit(frm, fn) {
  var dataPara = getFormJson(frm);
  $.ajax({
    url: frm.action,
    type: frm.method,
    data: dataPara,
    success: fn
  });
}
//将form中的值转换为键值对。
function getFormJson(frm) {
  var o = {};
  var a = $(frm).serializeArray();
  $.each(a, function () {
    if (o[this.name] !== undefined) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  });
  return o;
}

ajaxSubmit 메소드의 첫 번째 매개변수는 제출할 양식이고, 두 번째 매개변수는 ajax 호출 성공 후 처리 기능입니다.

양식 작업을 ajax url에 전달하고 양식 메서드를 ajax 유형에 전달한 다음 형식이 지정된 양식 콘텐츠를 데이터에 전달합니다.

getFormJson 메소드는 양식 요소를 json 형식의 키-값 쌍으로 변환합니다. {name:'aaa',password:'tttt'} 형식에서는 동일한 이름을 가진 항목을 배열에 배치하도록 주의하세요.

전화

//调用
$(document).ready(function(){
  $('#Form1').bind('submit', function(){
    ajaxSubmit(this, function(data){
      alert(data);
    });
    return false;
  });
});

ajaxSubmit 메소드를 호출하기 전에 데이터가 올바른지 확인할 수 있습니다. Alert(data)에서 자체 호출 반환 후처리 코드를 추가할 수 있습니다.

ajaxSubmit 메소드를 호출한 후 양식이 제출되지 않도록 return false; 문을 추가해야 합니다.

전체 예제 코드를 보려면 여기를 클릭하세요이 사이트에서 다운로드하세요.

더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자들은 이 사이트의 특별 주제인 "jquery의 Ajax 사용법 요약", "jQuery 테이블(테이블) 작업 기술 요약"을 확인할 수 있습니다. ", "JQuery 드래그 앤 드롭 특수 효과 및 기술 요약", "jQuery 확장 기술 요약", "jQuery Common Classic 특수 효과 요약" , "jQuery 애니메이션 및 특수 효과 사용 요약", "jquery 선택기 사용 요약" 및 "jQuery 일반 플러그인 및 사용 요약"

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