使用jQuery AJAX提交textarea文本内容时的多类报错问题排查

各问题的具体来源 #

• %22编码来源：%22是双引号的URL编码，你单独对textarea的值做了JSON.stringify，给文本加了双引号，再传给jQuery的data字段时，jQuery默认会把对象序列化为表单格式的键值对，双引号就被编码成了%22；URL里的submission: %7B7D是你AJAX请求地址自带的?submission=%7B%7D（空对象{}的URL编码），属于GET查询参数，和POST提交的内容无关。
• 保留contentType: "application/json; charset=utf-8"时报错：你虽然声明了请求体格式为JSON，但传给data的是普通JS对象，jQuery会自动把对象序列化为application/x-www-form-urlencoded格式的表单字符串，根本没有发送合法的JSON内容，服务端解析失败抛出错误。
• 移除contentType后报"Missing or empty submission prop in json"：此时jQuery用默认的表单编码格式提交，服务端要求读取JSON格式的POST body，无法从表单编码的内容里解析到submission参数，因此报错。
• 新增dataType: 'JSON'后抛SyntaxError：服务端返回的是纯文本错误信息（比如"Expected POST"），不是合法JSON格式，jQuery尝试将返回内容按JSON解析就会抛出语法错误。

核心要求：发送合法的原始JSON字符串作为POST请求体，不要让jQuery自动序列化参数。
修改后的getText函数示例：

function getText() {
    // 构造要提交的JS对象，直接取textarea的值，无需单独stringify
    const submitData = {
        submission: $('#text1').val()
    };
    $.ajax({
        url: 'ajax.php', // 去掉冗余的GET查询参数?submission=%7B%7D
        type: 'POST',
        // 声明请求体为JSON格式
        contentType: "application/json; charset=utf-8",
        // 关键：将整个对象转为JSON字符串，避免jQuery自动序列化为表单格式
        data: JSON.stringify(submitData),
        // 等服务端确认返回合法JSON后再开启，方便初期排查问题
        // dataType: 'json',
        success: function(data) {
            console.log("success " + data);
        },
        error: function(xhr, status, error) {
            // 打印服务端返回的原始错误信息，方便排查
            alert(`错误：${xhr.responseText}`);
        }
    })
}

关键修改点说明 #

• 不要单独对textarea的值做JSON.stringify，直接将值放在对象里，对整个对象统一序列化即可，避免产生多余的双引号编码。
• 去掉请求URL里冗余的?submission=%7B%7D参数，避免服务端混淆GET参数和POST body参数。
• 初期不要加dataType: 'json'，先保证服务端能正常处理请求、返回合法JSON后再开启，否则服务端返回错误文本时会直接触发前端语法报错。
• 移除未定义的success_callback函数调用，避免请求成功时触发前端未定义错误。
• 错误回调中打印xhr.responseText获取服务端返回的原始错误内容，而非jQuery封装的通用错误信息，方便排查问题。

内容的提问来源于stack exchange，提问作者skethoskope