表单提交前通过AJAX获取用户出生日期与手机号失败排查

我来帮你梳理一下当前代码里的几个关键问题，这些都是导致你无法获取并展示用户出生日期和手机号的核心原因：

一、后端代码的核心问题 #

1. 初始加载用户邮箱列表的SQL错误 #

你的GET /profile路由里的SQL语句逻辑有误：

cur.execute("SELECT firstname, lastname, email FROM users.data WHERE description = 'description'")

这里的WHERE description = 'description'是把description当成了固定字符串，而不是字段名或变量，这会导致你查询不到正确的用户数据。如果你的目标是获取所有用户的邮箱作为下拉选项，应该去掉无效的WHERE条件，同时只提取需要的邮箱字段：

cur.execute("SELECT email FROM users.data")
account = cur.fetchall()
# 把元组列表转换成纯邮箱字符串列表
description = [item[0] for item in account]

2. POST路由的逻辑错误与SQL风险 #

（1）脆弱的字符串解析

你处理前端JSON数据时用了非常不可靠的字符串切割：

data_list = list(data.values())
data_list = str(data_list)
doc_data = data_list.split()[2][:-4]

前端传的是{"selectedItems": "用户邮箱"}，完全可以直接提取邮箱值，不需要转字符串再切割：

selected_email = data.get('selectedItems')
# 如果你允许多选，这里可以处理数组，比如取第一个选中的邮箱
if isinstance(selected_email, list):
    selected_email = selected_email[0]

（2）SQL注入风险与错误查询方式

用字符串拼接SQL语句不仅容易出错，还存在严重的SQL注入风险，应该改用参数化查询（Python操作数据库的标准做法）：

cur.execute("SELECT born_date, phone_number FROM users.data WHERE email = %s", (selected_email,))

（3）无效的返回逻辑

你的POST路由里先执行了return jsonify(...)，后面的return render_template永远不会执行。而且AJAX请求需要返回JSON数据来动态更新前端，不是重新渲染页面。应该把查询到的出生日期和手机号放到返回的JSON里：

account = cur.fetchone()
if account:
    born = account[0]
    num = account[1]
    return jsonify({ 'status': 'SUCCESS', 'born': born, 'phone': num })
else:
    return jsonify({ 'status': 'ERROR', 'message': '用户未找到' })

二、前端代码的关键问题 #

1. 下拉选项的value值错误 #

当前后端传的description是元组列表，导致前端option的value是整个元组字符串（比如('John', 'Doe', 'john@example.com')），这会让AJAX传的数据不是纯邮箱。应该直接把邮箱作为option的value：

<select id='sel' name='sel' class="selectpicker sel" multiple data-live-search="true" onchange="optionClick(this)">
    {% for email in description%}
    <option value="{{ email }}">{{ email }}</option>
    {% endfor %}
</select>

2. 模态框内容无法动态更新 #

你用模板变量{{ born }}和{{ num }}展示数据，这些变量在页面加载时就已渲染完成，AJAX返回新数据后不会自动更新。需要给这两个元素添加ID，然后在AJAX回调里动态修改内容：

<h2 class="white-text" style="font-size: 14px; color: #000;">Born date is: <span id="born-date"></span></h2>
<h2 class="white-text" style="font-size: 14px; color: #000;">Phone number is: <span id="phone-number"></span></h2>

3. AJAX回调未处理返回数据 #

你的AJAX success回调只打印了数据，没有更新模态框内容，需要补充这部分逻辑：

$.ajax({
    url: "/profile",
    type: "POST",
    contentType: "application/json",
    data: data,
    success: function (response) {
        console.log(response);
        if (response.status === 'SUCCESS') {
            $('#born-date').text(response.born);
            $('#phone-number').text(response.phone);
        } else {
            alert(response.message);
        }
    },
    error: function() {
        alert('获取用户数据失败');
    }
});

4. 无效的DOM操作 #

process函数里的document.getElementById('#exampleModalCenter')是错误的——getElementById不需要加#，而且这行代码没有实际作用，直接删掉即可。

三、修复后的整体流程 #

1. 页面加载时，后端返回所有用户邮箱，前端渲染下拉列表。
2. 用户选择邮箱并点击Process按钮，前端通过AJAX把选中的邮箱传给后端。
3. 后端用参数化查询获取该用户的出生日期和手机号，返回JSON数据。
4. 前端在AJAX成功回调里动态更新模态框中的出生日期和手机号。
5. 用户可以点击Send Data按钮提交表单（后续你可以补充表单提交的AJAX逻辑）。

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