ASP.NET MVC 컨트롤러에 대한 효과적인 Ajax 호출을 수행하는 방법은 무엇입니까?

jQuery를 사용하여 ASP.NET MVC 컨트롤러에 Ajax 요청을 작성하는 방법에 대한 전체 가이드

이 기사에서는 jQuery를 사용하여 컨트롤러 및 뷰 구현은 물론 클라이언트-서버 통신을 포함하여 ASP.NET MVC 컨트롤러에 대한 Ajax 요청을 시작하는 방법을 안내합니다.

컨트롤러 동작

컨트롤러는 Ajax 요청을 처리하기 위한 작업을 정의해야 합니다. 다음 예에서 FirstAjax은 JSON 형식의 데이터로 응답하는 작업입니다.

<code class="language-csharp">public ActionResult FirstAjax()
{
    return Json("chamara", JsonRequestBehavior.AllowGet);
}</code>

보기

뷰는 jQuery를 초기화하고 FirstAjax 액션에 Ajax 요청을 보냅니다. 요청에는 경고 상자에 응답을 표시하는 성공 핸들러가 포함되어 있습니다.

<code class="language-javascript">$(document).ready(function () {
    var serviceURL = '/AjaxTest/FirstAjax';

    $.ajax({
        type: "POST",
        url: serviceURL,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: successFunc,
        error: errorFunc
    });

    function successFunc(data, status) {     
        alert(data);
    }

    function errorFunc() {
        alert('error');
    }
});</code>

개선방안

원본 Ajax 요청의 data 속성은 컨트롤러가 매개변수를 기대하지 않기 때문에 문제를 일으킨다는 점에 유의하세요. 이 속성을 제거하고 @Url.Action 메서드를 사용하면 문제가 해결됩니다.

<code class="language-javascript">$.ajax({
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: successFunc,
    error: errorFunc
});</code>

데이터가 포함된 POST 요청의 경우 매개변수를 허용하도록 컨트롤러 작업을 수정하고 데이터를 포함하도록 Ajax 요청을 수정해야 합니다.

<code class="language-csharp">// 控制器
[HttpPost]
public ActionResult FirstAjax(string a)
{
    return Json("chamara", JsonRequestBehavior.AllowGet);
}

// 视图
$.ajax({
    type: "POST",
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    data: { a: "testing" },
    dataType: "json",
    success: function() { alert('Success'); },
    error: errorFunc
});</code>

위 내용은 ASP.NET MVC 컨트롤러에 대한 효과적인 Ajax 호출을 수행하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!