Ciągle otrzymania 400 (Bad Request) na jquery ajax pocztą do kontrolera MVC

Question

Moje wezwanie ajax wygląda to

$.ajax({ //actually approve or reject the promotion 
       url: url, 
       type: "POST", 
       data: '{'+data.PromotionId+','+data.UserId+','+data.ReasonText+'}', 
       dataType: "json", 
       //contentType: "application/json; charset=utf-8", 
       success: function (data) { 
        if (indicator == 'A') { 
         alert('Promotion approved successfully!'); 
        } 
        else { 
         alert('Promotion rejected successfully.'); 
        } 

        var homelink = '<%: Url.Action("Index","Home") %>'; 
        window.location.href = (homelink); 


        returndata = data; 
       }, 
       error: function (xhRequest, ErrorText, thrownError) { 
        alert("Failed to process promotion correctly, please try again"); 
        console.log('xhRequest: ' + xhRequest + "\n"); 
        console.log('ErrorText: ' + ErrorText + "\n"); 
        console.log('thrownError: ' + thrownError + "\n"); 
       } 
      }); 

A mój kontroler MVC wygląda następująco:

[HttpPost] 
    public HttpResponseMessage ApprovePromotion(PromotionDecision decision) 
    { 
     if (ModelState.IsValid && decision != null) 
     { 
      bool status = PromotionBo.ApprovePromotion(decision); 
      if (status == true) 
       return new HttpResponseMessage(HttpStatusCode.OK); 
     } 
     return new HttpResponseMessage(HttpStatusCode.BadRequest); 
    } 

myślałem składni było poprawne w obu przypadkach, jednak za każdym razem, gdy wywołuję wywołanie ajaxa, otrzymuję odpowiedź 400. Co takiego robię źle?

Answer 1

Wysyłasz całkowicie zepsuty i nieprawidłowy ciąg JSON do serwera. To normalne, że akcja kontrolera ją odrzuca. Oprócz tego wstawiłeś do komentarza parametr contentType określający, że chcesz wysłać żądanie JSON.

Więc oto właściwy sposób wykonać żądanie:

$.ajax({ //actually approve or reject the promotion 
    url: url, 
    type: "POST", 
    data: JSON.stringify({ 
     // Those property names must match the property names of your PromotionDecision view model 
     promotionId: data.PromotionId, 
     userId: data.UserId, 
     reasonText: data.ReasonText 
    }), 
    contentType: "application/json; charset=utf-8", 
    success: function (data) { 
     if (indicator == 'A') { 
      alert('Promotion approved successfully!'); 
     } 
     else { 
      alert('Promotion rejected successfully.'); 
     } 

     var homelink = '<%: Url.Action("Index","Home") %>'; 
     window.location.href = (homelink); 

     returndata = data; 
    }, 
    error: function (xhRequest, ErrorText, thrownError) { 
     alert("Failed to process promotion correctly, please try again"); 
     console.log('xhRequest: ' + xhRequest + "\n"); 
     console.log('ErrorText: ' + ErrorText + "\n"); 
     console.log('thrownError: ' + thrownError + "\n"); 
    } 
}); 

Wskazówki jak używam metody JSON.stringify że jest natywnie wbudowane w nowoczesnych przeglądarkach, aby zapewnić, że JSON jest wysyłane do serwera jest prawidłowo i wszystkie wartości są poprawnie zakodowane. A jeśli potrzebujesz obsługi przeglądarek z epoki kamienia łupanego, możesz dołączyć do swojej strony skrypt json2.js, który zdefiniuje metodę JSON.stringify.

Ważna uwaga: Absolutnie nigdy kompilacja ciągów JSON przy użyciu konkatenacji ciągów jak w kodzie.

Alternatywnie, jeśli nie chcesz wysłać JSON zażądać można wysłać standardowego application/x-www-form-urlencoded prośbę:

$.ajax({ //actually approve or reject the promotion 
    url: url, 
    type: "POST", 
    data: { 
     promotionId: data.PromotionId, 
     userId: data.UserId, 
     reasonText: data.ReasonText 
    }, 
    success: function (data) { 
     if (indicator == 'A') { 
      alert('Promotion approved successfully!'); 
     } 
     else { 
      alert('Promotion rejected successfully.'); 
     } 

     var homelink = '<%: Url.Action("Index","Home") %>'; 
     window.location.href = (homelink); 

     returndata = data; 
    }, 
    error: function (xhRequest, ErrorText, thrownError) { 
     alert("Failed to process promotion correctly, please try again"); 
     console.log('xhRequest: ' + xhRequest + "\n"); 
     console.log('ErrorText: ' + ErrorText + "\n"); 
     console.log('thrownError: ' + thrownError + "\n"); 
    } 
}); 

To powinno działać w ten sam sposób i działania kontrolera powinien móc prawidłowo powiązać model.

Uwaga: Zauważyłem, że w swoim zgłoszeniu zwrotnym użyto następującej linii: returndata = data;. To prowadzi mnie do przekonania, że ​​próbujesz w jakiś sposób skonsumować wynik asynchronicznego żądania AJAX poza odwołaniem sukcesu, co nie jest możliwe. Nie mam pojęcia, co robisz z tą zmienną returndata, ale czuję, że jest źle.