如何实现基于状态变更的Ajax数据获取与文本打印功能？

先梳理原代码的几个基础问题，再补上逻辑实现你的需求：

1. 修复代码基础错误 #

• 原事件处理函数未传入event参数，直接调用event.preventDefault()会报错，需把函数声明改为function(event)
• POST请求的data参数格式不正确，后端通常需要键值对形式才能正确识别参数，不能直接传单个值stateID，要调整为键值对（键名需和后端接收的参数名一致）

2. 添加文本展示逻辑 #

假设后端接口返回的JSON结构为以下两种常见情况，对应不同的处理方式：

情况一：后端直接返回当前选中状态的文本 #

比如返回格式：

{ "consentText": "对应状态的注册同意文本内容" }

修改后的完整代码：

$("#state").on("change", function(event) {
    event.preventDefault();
    var stateID = $(this).val(); // 用$(this)更简洁，无需重复选择#state
    var url = "/s/QD-CIT/Registration-Consent";
    
    $.ajax({
        url: url,
        type: 'post',
        dataType: 'json',
        data: { stateID: stateID }, // 调整为键值对格式
        success: function (data) {
            // 将文本插入页面指定容器，需提前在页面添加该元素，比如<div id="consent-display"></div>
            $("#consent-display").text(data.consentText);
            // 如果文本包含HTML格式，可改用.html()方法：$("#consent-display").html(data.consentText);
        },
        error: function (err) {
            alert("加载同意文本失败，请重试"); // 替换原alert(2)，给用户明确提示
        }
    });
});

情况二：后端返回所有状态的文本映射 #

比如返回格式：

{
    "CA": "加州注册同意文本",
    "NY": "纽约州注册同意文本",
    "TX": "德克萨斯州注册同意文本"
}

只需修改success回调里的逻辑：

success: function (data) {
    // 根据选中的stateID从映射中取对应文本，无匹配时显示默认提示
    var consentText = data[stateID] || "暂无该状态的同意文本";
    $("#consent-display").text(consentText);
}

必要准备 #

页面上需提前添加用于展示文本的容器，示例：

<div id="consent-display"></div>

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