我在一个WordPress插件中工作。我需要以下AJAX代码的帮助。
// On change division
$(\'body\').on( \'change\', \'.division\', function() {
$.ajax({
type: "POST",
url:localData.statesurl, //http://localhost/wordpress/wp-admin/admin-ajax.php
data:{
division: $(this).val(), // I am getting value here.
action: \'division_to_district_ajax\' //Do you need anything here ?
},
success:function(rss){
console.log(rss);
$(\'.district\').empty();
var $opt = \'\';
$.each( JSON.parse(rss), function(key, value) {
$opt += \'<option value="\'+key+\'">\'+value+\'</option>\';
});
$(\'.district\').append($opt);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(errorThrown); // Bad Request
},
dataType: "json",
cache: false,
contentType: "application/json"
});
});
从上面的代码我得到
Bad Request 在控制台中。
我附上了一些网络标签的截图。
最合适的回答,由SO网友:Tom J Nowell 整理而成
问题是它正在发送JSON请求头，旧的遗留管理AJAX API不理解这一点。因此，以下是导致错误请求的原因：
dataType: "json",
contentType: "application/json"
您的端点可能能够处理该输入，但WP的管理AJAX处理程序不能，因此它永远不知道首先要触发哪个操作。
您有两种选择：
删除这些并相应地调整AJAX处理程序切换到现代REST API，获得一个合适的端点URL，该URL愉快地接受JSON并返回JSON，如果告诉您期望的内容，甚至可以为您编码/验证/清理一些其他注意事项：
$(\'body\').on( \'change\', \'.division\' 是一个相当广泛的事件处理程序，我建议将其从整个body标记限制为更具体的内容。没有检查响应以确保它是您所认为的，代码只是直接进入JSON.parse- 如果没有找到或返回任何值，则没有任何迹象表明发生了什么，但更重要的是：
代码中的一个主要安全漏洞
Building up a HTML string by joining variables up together in JS then appending it is awful for security. 这是javascript中代码所能做的最糟糕的事情之一eval\'ing代码。Use DOM node construction instead 并处理DOM节点，而不是HTML字符串。将此视为omgbbq高级别优先级修复。$( \'<option>\', { value: key, text: value } ) 是代码应该附加的内容，它更快更安全。这是一个安全版本，浏览器将自动转义和清理密钥，并确保没有恶意HTML潜入：
const data = JSON.parse( rss );
const options = data.map( function ( key, value ) {
return jQuery( \'<option>\', {
value: key,
text: value
} );
} );
jQuery(\'.district\').append( options );
由于浏览器不需要解析HTML，而且您也不必担心损坏的HTML标记，因此它的速度也会更快一些。请注意data 变量，我们现在可以将其包装在if语句中，并在JSON解析失败或它不包含我们期望的内容时更改行为。Never create HTML by joining up strings and variables, 这是一个重大的安全问题，速度很慢，而且没有必要。
