programing

Ajax 호출을 사용하여 양식 모음을 작업으로 전달하는 방법은 무엇입니까?

megabox 2023. 8. 22. 22:04
반응형

Ajax 호출을 사용하여 양식 모음을 작업으로 전달하는 방법은 무엇입니까?

양식 제출을 에이잭스 호출로 바꾸려고 합니다.작업은 컬렉션에 필요하며 새 모델을 만들고 싶지 않습니다.따라서 전체 양식(양식 제출과 동일)을 전달해야 하지만 Ajax 호출을 통해 전달해야 합니다.Json을 사용하여 직렬화를 시도했지만 양식 컬렉션이 비어 있습니다.이것은 내 행동 서명입니다.

public ActionResult CompleteRegisteration(FormCollection formCollection)

다음은 제 제출 버튼 클릭입니다.

var form = $("#onlineform").serialize();              
            $.ajax({
                url: "/Register/CompleteRegisteration",                
                datatype: 'json',
                data: JSON.stringify(form),
                contentType: "application/json; charset=utf-8",                
                success: function (data) {
                    if (data.result == "Error") {
                        alert(data.message);
                    }
                }
            });

이제 어떻게 양식 수집에 데이터를 전달할 수 있습니까?

부터FormCollection키-값 쌍은 여러 개이며, JSON은 해당 표현에 적합하지 않은 데이터 형식입니다.직렬화된 형식 문자열만 사용해야 합니다.

var form = $("#onlineform").serialize();
$.ajax({
    type: 'POST',
    url: "/Register/CompleteRegisteration",
    data: form,
    dataType: 'json',
    success: function (data) {
        if (data.result == "Error") {
            alert(data.message);
        }
    }
});

주요 변경 사항:

  1. POST로 설정된 요청 유형(여기서는 필요하지 않지만 더 자연스러운 것 같습니다)
  2. 요청 데이터로 JSON 문자열 대신 직렬화된 양식
  3. contentType이 제거됨 - 더 이상 JSON을 보내지 않습니다.

시도:

$(<your form>).on('submit',function(){
    $.ajax({
        url: "/Register/CompleteRegisteration" + $(this).serialize(), 
        // place the serialized inputs in the ajax call                
        datatype: 'json',
        contentType: "application/json; charset=utf-8",                
        success: function (data) {
            if (data.result == "Error") {
                alert(data.message);
            }
        }
    });
});

양식 모음에 추가 데이터를 전달하려는 사용자는 아래를 시도할 수 있습니다.

<script type="text/javascript"> 
function SubmitInfo() 
{
    var id = $("#txtid").val();    
    var formData = $('#yourformname').serializeObject();
    $.extend(formData, { 'User': id }); //Send Additional data

    $.ajax({
        url: 'Controlle/GetUser',
        cache: false,
        type: 'POST',
        dataType: 'json',
        data: decodeURIComponent($.param(formData)),
        success: function (data) {
            $('#resultarea').html(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert("AJAX error: " + textStatus + ' : ' + errorThrown);
        }
    });
}

$.fn.serializeObject = function () {
    var o = {};
    var a = this.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;
};
<script/>

작업 방법

public ActionResult GetUser(FormCollection frm)
  {
   int UserId = Convert.ToInt32(frm["user"]);
   // your code
   return Json(data, JsonRequestBehavior.AllowGet);
  }

자세한 내용은 링크를 참조하십시오.

언급URL : https://stackoverflow.com/questions/17797053/how-to-pass-formcollection-using-ajax-call-to-an-action

반응형