ajax 호출에서 Asp.net 웹 API 오류가 발생합니다.

Question

ASP.NET 웹 API 서비스를 만들고 호스팅했습니다. 내가 Fiddler를 검사했을 때 서비스가 잘 작동하지만 jQuery ajax를 통해 동일한 호출을하면 작동하지 않으며 오류가 발생하지도 않습니다. 나는 같은 문제를 다른 API 메소드를 호출하지만 점점 시도

WebAPI :

namespace WebApi.Controllers 
{ 
    public class ValuesController : ApiController 
    { 
     // GET api/values 
     public IEnumerable<string> Get() 
     { 
      return new string[] { "value1", "value2" }; 
     } 

     // GET api/values/5 
     public string Get(int id) 
     { 
      return "value"; 
     } 

     // POST api/values 
     public string Post(Interview Interview) 
     { 


      return "Date: " + Interview.DateOfSurvey + " \n rdInterviewObtained: " + Interview.rdInterviewObtained + "\n txtWhowasinterOther: " + Interview.txtWhowasinterOther; 
     } 

     // PUT api/values/5 
     public void Put(int id, [FromBody]string value) 
     { 

     } 

     // DELETE api/values/5 
     public void Delete(int id) 
     { 
     } 
    } 
} 

아약스 전화 :

$("#btnSave2").click(function() { 
var person = { DateOfSurvey: '01-01-2012', rdInterviewObtained: 'N', txtWhowasinterOther: 'N' }; 
alert('inside button click'); 
jQuery.support.cors = true; 

     $.ajax({ 
      url: "http://url/api/Values", 
      type: 'GET', 
      //data: person, 
      //dataType: 'json', 
      success: function (data) { 
       alert('success'); 

      }, 
      error: function (x, y, z) { 
       alert('error'); 
       alert(x + '\n' + y + '\n' + z); 
      } 
     }); 
}); 

Answer 1

당신의 .click 처리기에서이 AJAX 메소드를 호출하는 것으로 보인다 일부 단추. 제출 버튼 인 경우 콜백에서 false를 반환하여 기본 액션을 취소하십시오. 그렇지 않으면 AJAX 호출에 실행할 시간이 없을 수 있습니다.

코드에 대한 또 다른 문제점은 jQuery가 CORS를 사용하도록 지시했으나 작동하려면 웹 API가 올바른 응답 헤더를 보내야한다는 것입니다. 여기에 an article이 있으며 서버에서이 기능을 구현하는 방법을 보여줍니다.

jQuery.support.cors = true; 

$('#btnSave2').click(function() { 
    $.ajax({ 
     url: 'http://url/api/Values', 
     type: 'GET', 
     success: function (data) { 
      alert('success'); 
     }, 
     error: function (x, y, z) { 
      alert('error'); 
      alert(x + '\n' + y + '\n' + z); 
     } 
    }); 

    return false; 
});