AJAX POST请求时邮箱地址中的+符号丢失问题如何解决

问题原因 #

+号丢失确实是application/x-www-form-urlencoded编码规则导致的：在该编码规范中，+号会被服务端默认解码为空格，直接拼接参数没有对特殊字符做URL编码，就会出现这个问题。
此前替换multipart/form-data失效的原因是，请求体仍为手动拼接的字符串，不符合multipart/form-data的格式要求，PHP无法正常解析参数，因此功能完全失效。

解决方案 #

方案1：对参数值做URL编码后再拼接 #

拼接参数字符串时，对每个参数的值使用encodeURIComponent()处理，转义包括+在内的所有URL特殊字符即可：

function prefUpdate() {
    let ytTog = document.getElementById("togBtn").checked;
    let unameNew = document.getElementById("uname").value;
    let usnameNew = document.getElementById("usname").value;
    let emailNew = document.getElementById("email").value;
    // 每个参数值都用encodeURIComponent转义
    let params = "ytTog="+encodeURIComponent(ytTog)+"&unameNew="+encodeURIComponent(unameNew)+"&usnameNew="+encodeURIComponent(usnameNew)+"&emailNew="+encodeURIComponent(emailNew);
    let xhr = new XMLHttpRequest();
    xhr.open('POST', 'pref_update.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            let return_data = xhr.responseText;
            if(return_data) {
               // <do stuff>
            }
        }
    }
    xhr.send(params);
}

方案2：使用FormData自动处理编码（更推荐） #

不用手动拼接参数和设置Content-Type，直接用FormData对象装载参数，浏览器会自动处理编码、请求头格式，从根源避免特殊字符转义问题，后端PHP不需要做任何修改就能正常接收参数：

function prefUpdate() {
    let ytTog = document.getElementById("togBtn").checked;
    let unameNew = document.getElementById("uname").value;
    let usnameNew = document.getElementById("usname").value;
    let emailNew = document.getElementById("email").value;
    // 构造FormData对象
    let params = new FormData();
    params.append('ytTog', ytTog);
    params.append('unameNew', unameNew);
    params.append('usnameNew', usnameNew);
    params.append('emailNew', emailNew);
    let xhr = new XMLHttpRequest();
    xhr.open('POST', 'pref_update.php', true);
    // 不需要手动设置Content-Type，浏览器会自动生成带boundary的正确头
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            let return_data = xhr.responseText;
            if(return_data) {
               // <do stuff>
            }
        }
    }
    xhr.send(params);
}

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