当MySQL查询无结果时，如何用jQuery实现元素显示与隐藏？

核心问题分析 #

原代码存在三个关键问题：PHP输出方式错误、SQL注入风险、前端逻辑颠倒，同时HTML标签嵌套不规范。

1. 修复PHP代码（checkMail.php） #

替换原代码为以下内容，解决输出、注入和无结果报错问题：

include("../config.php");
$db = new Database();

// 过滤并获取POST参数
$email = filter_input(INPUT_POST, 'company_email', FILTER_VALIDATE_EMAIL);
if (!$email) {
    echo json_encode(['exists' => false]);
    exit;
}

// 使用参数化查询避免SQL注入
$query = "SELECT company_email FROM sic_auth WHERE company_email = ?";
// 假设你的Database类支持参数绑定，若不支持需调整为对应方法
$result = $db->ExecuteQuery($query, [$email]);
$exists = !empty($result);

// 返回JSON格式的状态
echo json_encode(['exists' => $exists]);

注：如果你的Database类不支持参数绑定，需手动转义特殊字符：$email = $db->escapeString($email);，再拼接SQL，但参数化查询是最优方案。

2. 修复jQuery代码 #

调整逻辑，正确处理邮箱存在/不存在的两种情况：

function checkMailStatus() {
    var company_email = $("#company_email").val();
    $.ajax({
        type: 'post',
        url: 'checkMail.php',
        dataType: 'json', // 指定接收JSON格式数据
        data: {
            company_email: company_email
        },
        success: function(response) {
            if (response.exists) {
                // 邮箱已存在：显示错误，禁用提交按钮
                document.getElementById("submit-form").disabled = true;
                $("#err-text").text("该邮箱已被注册。").show();
                $('#company_email').addClass('err-input');
            } else {
                // 邮箱不存在：隐藏错误，启用提交按钮
                document.getElementById("submit-form").disabled = false;
                $("#err-text").text("").hide();
                $('#company_email').removeClass('err-input');
            }
        },
        error: function() {
            // 请求失败时的容错处理
            $("#err-text").text("验证失败，请重试。").show();
        }
    });
}

3. 修复HTML标签嵌套 #

原HTML中label标签闭合错误，调整为：

<label for="company_email" id="email-err">Company Email address <span class="text-danger">*</span></label>
<input type="email" class="form-control" onblur="checkMailStatus()" name="company_email" id="company_email" value="a@b.com" placeholder="Email" required>
<i class="input-helper"></i>
<span id="err-text" style="display: none;"></span>

初始隐藏错误提示，避免页面加载时显示空标签

关键优化点 #

• 用JSON返回结构化数据，前端判断更严谨
• 加入SQL注入防护，提升安全性
• 完善错误分支处理，覆盖请求失败场景
• 规范HTML标签结构，避免渲染异常

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