새로 고침 없이 Jquery Ajax 사용자 정의 제출 양식

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

기존 Form을 제출하기 위해 많은 코드를 작성해야 한다면 Form 제출을 Ajax로 직접 전송하면 어떨까요.

이전 처리 방법

예를 들어 Form 코드는 다음과 같습니다

<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 Ajax 사용자 정의 제출 양식 양식 번호 관련글 새로고침 PHP 중국어 홈페이지를 주목해주세요!