How to debug error related to AJAX?

@jaseofspades88 I add failure after success response in my AJAX in hope it will show me what exactly is the error.

success: function(response)
        {
          var res = JSON.parse(response);
                    console.log(res);
                    if(res.success == true)
                    $('#messageSupport').html('<span style="color: green">Update Saved!</span>');
                    else
                    $('#messageSupport').html('<span style="color: red">Data Cannot Be Saved</span>');
        },
        failure: function (jqXHR, textStatus, errorThrown) 
        {
            $('#messageSupport').html('<p>status code: '+jqXHR.status+'</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>'+jqXHR.responseText + '</div>');
        }

But when I check on inspect still nothing was shown on preview and response. It just give me Status Code: 500 at the headers

@CODE-AXION I write this to show my AJAX response

type: 'post',
        data: data,
        success: function(response)
        {
          var res = JSON.parse(response);
                    console.log(res);
                    if(res.success == true)
                    $('#messageSupport').html('<span style="color: green">Update Saved!</span>');
                    else
                    $('#messageSupport').html('<span style="color: red">Data Cannot Be Saved</span>');
        },
        failure: function (jqXHR, textStatus, errorThrown) 
        {
            $('#messageSupport').html('<p>status code: '+jqXHR.status+'</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>'+jqXHR.responseText + '</div>');
        }

The form still work fine on localhost but error when run on online server . I already check on inspect. Nothing was shown on preview and response. Only this was shown on console

jquery.min.js:2 POST https://neowoodmanagement.com.my/supportindex.php 500 send @ jquery.min.js:2 ajax @ jquery.min.js:2 (anonymous) @ VM105:5 dispatch @ jquery.min.js:2 y.handle @ jquery.min.js:2

@Faiza why are you even debug in production? that not how it supposed to work

@Faiza you didnt add csrf token please add csrf token !

in the header: <meta name="_token" content="{{ csrf_token() }}">

$(function () {
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
    });
});

@CODE-AXION I already add as what you shown but still nothing change. But may I know what is csrf token?

<meta name="keywords" content=""/>
<meta name="_token" content="{{ csrf_token() }}">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">

$(document).ready(function () {
$('#duplicate').click(function () {
var data = $('#supportform').serialize() + '&duplicate=duplicate';
      $.ajax({
        headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') },
        url: 'supportindex.php',
        type: 'post',
        data: data,
        success: function(response)

Am I doing it right?

@Faiza

try to use this:

contentType: "application/json; charset=utf-8",
    dataType: "json",

and remove

var res = JSON.parse(response);

@CODE-AXION Did this suppose to show me something on preview or response? If yes, I already try and nothing shown there

$.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')},
        url: 'supportindex.php',
        type: 'post',
        data: data,
        contentType:'application/json; charset=utf-8',
        dataType: 'json',
        success: function(response)
        {
            console.log(res);
            if(res.success == true)
            $('#messageSupport').html('<span style="color: green">Update Saved!</span>');
            else
            $('#messageSupport').html('<span style="color: red">Data Cannot Be Saved</span>');
        },
        failure: function (jqXHR, textStatus, errorThrown) 
        {
            $('#messageSupport').html('<p>status code: '+jqXHR.status+'</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>'+jqXHR.responseText + '</div>');
        }

@Faiza ok can you show me the jquery version ?

@CODE-AXION

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

I use this one

The thing is only 2 form were problem. One is using ajax that I already shown to you, another form i even didn't use ajax to submit it to database. Both return error 500

@Faiza are you using laravel or core php ? because i think the problem is the file path

@CODE-AXION I'm using core php.