Ajax error getting called instead of success

Question

<script>
 function editComment(id) {
 var content = $('#Content').val();
 var modelData = { 'Id': id, 'Content': content };
 $.ajax({
 type: 'POST',
 dataType: 'json', 
 url: '@Url.Action("EditC", "Comment")',
 data: JSON.stringify({ model: modelData }),
 contentType: 'application/json',
 success: function () {
 alert("YES");
 },
 error: function () {
 alert("Error");
 }
 });
 }
 </script>

Here the server is returning 200 OK, but for some reason the error function is getting called. Both type and contentType seem to be correct. Any idea how to fix this?

Edit: After adding

error: function (xhr, textStatus, error) {
 console.log(xhr.responseText);
 console.log(xhr.statusText);
 console.log(textStatus);
 console.log(error);
 }

this is what is being logged:

parsererror
parsererror
SyntaxError: Unexpected end of JSON input
 at parse (<anonymous>)
 at ajaxConvert (jquery-3.4.1.js:9013:19)
 at done (jquery-3.4.1.js:9483:15)
 at XMLHttpRequest.<anonymous> (jquery-3.4.1.js:9785:9)

• David: Add a parameter to the error callback function and log that parameter to the console. (Or observe it in the browser's script debugger.) What does it tell you about the error? How have you confirmed that the server is returning a 200 response? Or that the operation isn't perhaps being invoked twice, once successfully and once failing?
• Ivar: It seems the JSON that is returned from your server is incomplete/invalid. The problem is most likely on the server. In the Developer Tools under the Network tab you should be able to see what your server is returning.
• ELOL: @Ivar What the server is returning is return new HttpStatusCodeResult(200) and under the Network tab it says 200.
• David: @EL02: In the network tab, is there any body content in the response?
• David: @EL02: Mostly a guess at this point, but what happens if you remove dataType: 'json', entirely and let jQuery infer the response type?

Answer 1

Moving to an answer for future readers...

The server is indeed returning a successful response, but an empty successful response:

return new HttpStatusCodeResult(200);

However, the client-side code is expecting valid JSON:

dataType: 'json',

As a result, after the successful response is received, internally the jQuery code attempts to parse that response as JSON and that fails, resulting in triggering the error callback.

Since there's no response body (and in most cases even when there is, as long as the server returns the correct MIME type), you don't need or want to specify a dataType in the jQuery AJAX operation. Simply remove this part:

dataType: 'json',