如何用PHP+jQuery AJAX按插入日期从数据库取结果并赋值到输入框(Cordova应用)
实现基于日期的事件记录加载与编辑功能
我看了你的代码,发现几个关键问题需要修正,同时完善逻辑就能实现你要的功能。咱们一步步来:
1. 先修正现有代码的核心问题
前端jQuery代码优化
你的当前代码里有个逻辑错误:选日期时判断event != ''才发起请求,这不对——用户刚选日期的时候textarea大概率是空的,应该不管textarea内容,只要选了日期就查询该天的记录。另外,返回数据的处理也需要调整,因为PHP返回的是数组,要正确提取事件内容:
// 先确保localStorage里有登录的邮箱,避免报错 const email = localStorage.getItem('email'); if (!email) { alert('请先登录!'); return; } $("#giorno").change(function () { const giorno = $("#giorno").val(); // 查询阶段只需要日期和邮箱,不需要带event内容 const requestData = { giorno: giorno, email: email, found: 1 }; $.ajax({ url: 'http://----/auth.php', type: 'post', dataType: "json", data: requestData, crossDomain: true, cache: false, success: function (response) { $(".msg").html(""); if (response.error === '') { // 如果有记录,把内容填充到textarea;没有的话清空让用户新增 if (response.events.length > 0) { $("#event").val(response.events[0].event); } else { $("#event").val(''); $(".msg").html("该日期无记录,可以新增!"); } } else { $(".msg").html(response.error); $("#event").val(''); } }, error: function() { $(".msg").html("请求失败,请稍后重试!"); } }); return false; });
后端PHP代码修复(auth.php)
你的SQL语句犯了一个低级错误:把变量$giorno写成了字符串'giorno',导致永远查不到数据。另外,必须用预处理语句防止SQL注入,这是生产环境的必备要求。最后统一返回格式,让前端更容易处理:
<?php // 先确保数据库连接$con已经正确建立 if(isset($_POST['found'], $_POST['email'], $_POST['giorno'])) { $email = $_POST['email']; $rawdate = htmlentities($_POST['giorno']); $giorno = date('Y-m-d', strtotime($rawdate)); // 用预处理语句防止SQL注入,避免安全风险 $stmt = $con->prepare("SELECT event FROM events WHERE email = ? AND created_at = ?"); $stmt->bind_param("ss", $email, $giorno); $stmt->execute(); $result = $stmt->get_result(); $events = []; while ($row = $result->fetch_object()) { $events[] = $row; } // 统一返回JSON格式,包含错误信息和数据 echo json_encode([ 'error' => '', 'events' => $events ]); } else { // 参数缺失时返回明确的错误提示 echo json_encode([ 'error' => '参数不完整,请检查请求!', 'events' => [] ]); } ?>
2. 新增保存/编辑功能(补充核心逻辑)
现在加载记录的功能没问题了,接下来需要实现用户修改内容后的保存逻辑。你需要先在HTML里加一个保存按钮:
<button id="saveEvent" style="margin-top:10px;">保存记录</button>
然后添加对应的jQuery代码,处理保存请求:
$("#saveEvent").click(function() { const giorno = $("#giorno").val(); const eventContent = $("#event").val().trim(); const email = localStorage.getItem('email'); // 校验必填项 if (!giorno || !eventContent || !email) { $(".msg").html("请选择日期并填写事件内容!"); return false; } $.ajax({ url: 'http://----/save-event.php', // 新建一个处理保存的PHP文件 type: 'post', dataType: 'json', data: { email: email, giorno: giorno, event: eventContent }, crossDomain: true, cache: false, success: function(response) { if (response.error === '') { $(".msg").html("保存成功!"); } else { $(".msg").html(response.error); } }, error: function() { $(".msg").html("保存失败,请稍后重试!"); } }); return false; });
对应的save-event.php代码(自动判断新增或更新):
<?php // 确保数据库连接$con已正确建立 if(isset($_POST['email'], $_POST['giorno'], $_POST['event'])) { $email = $_POST['email']; $rawdate = htmlentities($_POST['giorno']); $giorno = date('Y-m-d', strtotime($rawdate)); $event = htmlentities($_POST['event']); // 先检查该日期是否已有记录 $checkStmt = $con->prepare("SELECT id FROM events WHERE email = ? AND created_at = ?"); $checkStmt->bind_param("ss", $email, $giorno); $checkStmt->execute(); $checkResult = $checkStmt->get_result(); if ($checkResult->num_rows > 0) { // 已有记录,执行更新操作 $updateStmt = $con->prepare("UPDATE events SET event = ? WHERE email = ? AND created_at = ?"); $updateStmt->bind_param("sss", $event, $email, $giorno); if ($updateStmt->execute()) { echo json_encode(['error' => '']); } else { echo json_encode(['error' => '更新失败:' . $con->error]); } $updateStmt->close(); } else { // 无记录,执行新增操作 $insertStmt = $con->prepare("INSERT INTO events (email, created_at, event) VALUES (?, ?, ?)"); $insertStmt->bind_param("sss", $email, $giorno, $event); if ($insertStmt->execute()) { echo json_encode(['error' => '']); } else { echo json_encode(['error' => '新增失败:' . $con->error]); } $insertStmt->close(); } $checkStmt->close(); } else { echo json_encode(['error' => '参数不完整,请检查请求!']); } ?>
3. 额外注意事项
- 确保你的
events表包含id(自增主键)、email(外键关联用户表)、created_at(DATE类型字段)、event(TEXT类型字段)这些必要字段。 - Cordova应用中,要在
config.xml里配置允许访问你的后端域名:<allow-navigation href="http://----/*" />,否则会跨域报错。 - 日期格式要保持统一,前端传递的日期和数据库存储的格式都是
Y-m-d,避免匹配失败。
内容的提问来源于stack exchange,提问作者Andrei Cristea
相关产品推荐
相关产品推荐

