Did not attempt to load JSON data because the request Content-Type was not 'application/json'

Question

I am confused why I am getting the error stated in the title because I JSON.stringify() the data dictionary, and I believe that my if statements are correct. I am trying to post the following data: which model is selected from one of the select drop-downs (and throw an error if more than one is selected), the integer inputted into the text box, and the text inputted into the text area.

<body>
    <script>
        function toggleField(hideObj,showObj){
            hideObj.disabled=true;        
            hideObj.style.display='none';
            showObj.disabled=false;   
            showObj.style.display='inline';
            showObj.focus();
        }

        $(document).ready(function() {
            $("form").submit(function() { 
                var gpt_select = document.getElementById('GPT');
                var gpt_value = gpt_select.options[gpt_select.selectedIndex].text;
                var bert_select = document.getElementById('BERT');
                var bert_value = bert_select.options[bert_select.selectedIndex].text;
                var trans_select = document.getElementById('transformer');
                var trans_value = trans_select.options[trans_select.selectedIndex].text;
                var text = document.getelementById("text_box").value;
                var length = document.getelementById("length").value;

                if (length.isInteger() == false) {
                    throw 'Length must be an integer.';
                    console.log('Length must be an integer.');
                }

                if ((gpt_value == "" && bert_value == "" && trans_value != "") ||
                    (gpt_value != "" && bert_value == "" && trans_value == "") ||
                    (gpt_value == "" && bert_value != "" && trans_value == "")) {
                    if (gpt_value != "") {
                        $.ajax({
                            type: "POST",
                            method: "POST",
                            url: "/textGen",
                            data: JSON.stringify({"model": gpt_value, "text": text, "length": length}),
                            contentType: "application/json",
                            dataType: 'json' 
                        });
                    }
                    if (bert_value != "") {
                        $.ajax({
                            type: "POST",
                            method: "POST",
                            url: "/textGen",
                            data: JSON.stringify({"model": bert_value, "text": text, "length": length}),
                            contentType: "application/json",
                            dataType: 'json' 
                        });
                    }
                    if (trans_value != "") {
                        $.ajax({
                            type: "POST",
                            method: "POST",
                            url: "/textGen",
                            data: JSON.stringify({"model": trans_value, "text": text, "length": length}),
                            contentType: "application/json",
                            dataType: 'json' 
                        });
                    }          
                } else {
                    throw 'Select ONE model type.';
                    console.log('Select ONE model type.');
                }
            });
        });
    </script>
    <div class="title">
        <h1>Cognitive AI</h1>
    </div>
    <form action="/textGen" method="POST">
        <div class="text_input">
            <textarea id="text_box" rows="1" cols="10">Enter prompt text here.</textarea>
            <label id="length_label" for="length">Desired length of generated text:</label><br>
            <input type="text" id="length" name="length"><br>
        </div>
        <p id="select_model_txt">Select model type:</p>
        <div class="model_type">
            <div class="GPT_models">
                <div class="GPT2">
                    <p class="GPT2_label" id="title_text">GPT-2</p>
                    <img class="GPT2_label" id="openAI_logo" src="https://nextgrid.ai/wp-content/uploads/2021/04/openai-icon-cut-1-1024x1024.png">
                </div>
                <select id="GPT" name="GPT-2" onchange="if(this.options[this.selectedIndex].value=='customOption'){
                    toggleField(this,this.nextSibling);
                    this.selectedIndex='0';
                }">
                    <option></option>
                    <option>GPT-2 Extra Large</option>
                    <option>GPT-2 Large</option>
                    <option>GPT-2 Medium</option>
                    <option>GPT-2 Small</option>
                    <option value="customOption">Other</option>
                </select><input name="GPT-2" style="display:none;" disabled="disabled" 
                        onblur="if(this.value==''){toggleField(this,this.previousSibling);}"><br>
            </div>
            <div class="BERT_models">
                <p id="title_text">BERT</p>
                <select id="BERT" name="BERT" onchange="if(this.options[this.selectedIndex].value=='customOption'){
                    toggleField(this,this.nextSibling);
                    this.selectedIndex='0';
                }">
                    <option></option>
                    <option>ALBERT</option>
                    <option>BERT</option>
                    <option>BERTSUM</option>
                    <option>DistilBERT</option>
                    <option>ELECTRA</option>
                    <option>RoBERTa</option>
                    <option>SPANBERT</option>
                    <option>XLNet</option>
                    <option value="customOption">Other</option>
                </select><input name="BERT" style="display:none;" disabled="disabled" 
                        onblur="if(this.value==''){toggleField(this,this.previousSibling);}"><br>
            </div>
            <div class="trans_models">
                <p id="transformer_title">Transformer-XL</p>
                <select id="transformer" name="transformer" onchange="if(this.options[this.selectedIndex].value=='customOption'){
                    toggleField(this,this.nextSibling);
                    this.selectedIndex='0';
                }">
                    <option></option>
                    <option>Transformer-XL</option>
                    <option value="customOption">Other</option>
                </select><input name="transformer" style="display:none;" disabled="disabled" 
                        onblur="if(this.value==''){toggleField(this,this.previousSibling);}"><br>
            </div>
        </div>
        <input type="submit" value="Generate text">
    </form>
</body>