如何通过AJAX分别获取MySQL字段mus_indirim和mus_isim并展示

没问题，我来帮你一步步实现这个需求，全程用PDO操作数据库（这确实是比旧的mysql_*函数安全得多的选择），分前端和后端两部分来写：

前端部分 #

首先准备HTML结构，两个输入框分别用来显示mus_isim和mus_indirim的值，再写AJAX代码发送POST请求：

HTML #

<!-- 用来展示返回数据的输入框 -->
<input type="text" id="musIsimInput" placeholder="客户名称">
<input type="text" id="musIndirimInput" placeholder="折扣率">

<!-- 可以加个触发按钮，也可以根据你的业务逻辑自动触发 -->
<button onclick="fetchCustomerData()">获取客户数据</button>

JavaScript（原生JS） #

function fetchCustomerData() {
    // 这里是你要发送给后端的查询条件，比如客户ID之类的，根据你的实际需求修改
    const postData = {
        customerId: 123 // 示例数据，替换成你实际要传的参数
    };

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'your-backend-page.php', true);
    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            try {
                const response = JSON.parse(xhr.responseText);
                // 将返回的数据填充到对应的输入框
                document.getElementById('musIsimInput').value = response.mus_isim || '';
                document.getElementById('musIndirimInput').value = response.mus_indirim || '';
            } catch (e) {
                console.error('解析响应失败:', e);
                alert('获取数据出错，请稍后重试');
            }
        } else {
            alert('请求失败，状态码: ' + xhr.status);
        }
    };

    xhr.onerror = function() {
        alert('网络错误，无法连接后端');
    };

    // 将数据转为JSON字符串发送
    xhr.send(JSON.stringify(postData));
}

如果你习惯用jQuery，也可以用下面的简化版：

function fetchCustomerData() {
    const postData = { customerId: 123 };
    $.ajax({
        url: 'your-backend-page.php',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(postData),
        success: function(response) {
            $('#musIsimInput').val(response.mus_isim || '');
            $('#musIndirimInput').val(response.mus_indirim || '');
        },
        error: function(xhr, status, error) {
            alert('获取数据失败: ' + error);
        }
    });
}

后端部分（PHP + PDO） #

这部分负责接收前端的POST数据，用PDO查询MySQL，然后返回JSON格式的结果：

<?php
// 设置响应头为JSON格式
header('Content-Type: application/json');

// 数据库连接信息，替换成你的实际配置
$dbHost = 'localhost';
$dbName = 'your_database_name';
$dbUser = 'your_username';
$dbPass = 'your_password';

try {
    // 初始化PDO连接
    $pdo = new PDO("mysql:host=$dbHost;dbname=$dbName;charset=utf8mb4", $dbUser, $dbPass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // 接收前端发送的JSON数据
    $inputData = json_decode(file_get_contents('php://input'), true);
    if (!$inputData || !isset($inputData['customerId'])) {
        echo json_encode(['error' => '缺少必要的查询参数']);
        exit;
    }

    // 预处理SQL语句，防止SQL注入
    $stmt = $pdo->prepare("SELECT mus_indirim, mus_isim FROM your_table_name WHERE id = :customerId");
    $stmt->bindParam(':customerId', $inputData['customerId'], PDO::PARAM_INT);
    $stmt->execute();

    // 获取查询结果
    $result = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($result) {
        // 返回查询到的字段值
        echo json_encode([
            'mus_isim' => $result['mus_isim'],
            'mus_indirim' => $result['mus_indirim']
        ]);
    } else {
        echo json_encode(['error' => '未找到对应的数据']);
    }

} catch(PDOException $e) {
    // 捕获数据库错误，返回错误信息（生产环境可以隐藏具体错误）
    echo json_encode(['error' => '数据库查询失败: ' . $e->getMessage()]);
}
?>

注意事项 #

• 把代码里的your-backend-page.php、数据库配置、表名、查询条件（比如WHERE id = :customerId）都替换成你实际的业务信息
• PDO的预处理语句一定要用，这能有效防止SQL注入，比旧的mysql_*函数安全太多
• 前端发送的参数要和后端的接收逻辑对应，比如如果你的查询条件不是customerId，要同步修改两边的代码
• 生产环境下，不要把具体的数据库错误信息返回给前端，避免泄露敏感信息

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