如何使用PHP去除AJAX响应中的HTML标签？

问题根源 #

你的user_list.php脚本在输出taken/not_taken标识后没有终止执行，脚本后续的页面HTML模板内容也被当做接口响应返回，导致你拿到的响应带了多余的HTML内容。同时你的AJAX回调里也存在多余的错误逻辑。

修复方案 #

1. 修改PHP代码

核心是在输出接口响应结果后立刻终止脚本执行，同时建议修复原代码的SQL注入风险：

$db = mysqli_connect('localhost', 'root', '', 'my_assesment');

if (isset($_POST['username_check'])) {
    $username = $_POST['user_name'];
    // 使用预处理语句避免SQL注入
    $stmt = mysqli_prepare($db, "SELECT * FROM user_information WHERE user_name = ?");
    mysqli_stmt_bind_param($stmt, "s", $username);
    mysqli_stmt_execute($stmt);
    $results = mysqli_stmt_get_result($stmt);
    
    if (mysqli_num_rows($results) > 0) {
        echo "taken";   
    } else {
        echo "not_taken";
    }
    // 输出结果后终止执行，后续的HTML内容不会被返回
    exit();
}

// 原页面的HTML模板、其他业务逻辑放在exit之后即可

2. 修改AJAX代码

删除回调里错误的页面替换、DOM查找逻辑，新增响应内容去空白处理避免判断异常：

var username_state = false;
var email_state = false;
$('#username').on('blur', function(){
    var username = $('#username').val();
    if (username == '') {
        username_state = false;
        return;
    }
    $.ajax({
        url: 'user_list.php',
        type: 'post',
        data: {
            'username_check' : 1,
            'user_name' : username,
        },
        success: function(response){
            // 去除响应两端的空白字符，避免换行、空格导致判断失败
            response = response.trim();
            if (response == 'taken' ) {
                username_state = false;
                $('#username').parent().removeClass();
                $('#username').parent().addClass("form_error");
                $('#username').siblings("span").text('Sorry... Username already taken');
            }
            else if (response == 'not_taken') {
                username_state = true;
                $('#username').parent().removeClass();
                $('#username').parent().addClass("form_success");
                $('#username').siblings("span").text('Username available');
            }
        }
    });
});

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