javascript - 使用 ajax 将信息传递给 db
问题描述
我正在尝试通过 Ajax jQuery 将信息从我的 HTML 列表传递到数据库。我不确定我的方法是否有效以及我应该如何进行。我最大的问题是如何从列表中获取正确的信息,以便我可以将它们传递到 PHP 页面并插入它们。我从我的get_data
函数中得到的是这样的:
詹姆斯蓝看起来不错
Rebecka black 看起来很糟糕
我将尝试做的是将此信息插入到我的数据库中的 colors.php 文件中。我的表如下所示:
人 颜色名称 观点
所以它应该看起来像这样:
person = James
color_name = blue
opinion = Looks good
HTML
<div>
<ul data-person="James">
<li data-color_opinion="blue">Looks good</li>
<li data-color_opinion="green">Looks ok</li>
</ul>
<ul data-person="Rebecka">
<li data-color_opinion="blue">Looks bad</li>
<li data-color_opinion="black">Looks very bad</li>
</ul>
</div>
jQuery Ajax
function get_data() {
$.each($('ul'), function(i, el) {
$.each($(el).find("[data-color_opinion]"), function(j, child) {
let person = $(el).data('person');
let color_name = $(child).data('color_opinion');
let opinion = $(child).text();
});
});
};
$.ajax({
type: "POST",
dataType: "json",
url: 'colors.php',
data: get_data(),
success: function(data) {
//data is what your PHP page send you back,
//what do you want to do with it?
console.log(data);
}
});
解决方案
每次迭代都会覆盖person
、color_name
和opinion
变量的值。而且get_data()
无论如何都不会返回任何内容,因此没有任何内容被分配,data
也没有任何内容被发布到您的 PHP 页面。
您需要在每次迭代中保存收集的值,可能在一个数组中,然后在最后返回该数组。我不知道您的 PHP 页面在期待什么,但是是这样的:
function get_data() {
var data = [];
$.each($('ul'), function(i, el) {
$.each($(el).find("[data-color_opinion]"), function(j, child) {
let person = $(el).data('person');
let color_name = $(child).data('color_opinion');
let opinion = $(child).text();
data.push({ Person: person, ColorName: color_name, Opinion: opinion });
});
});
return data;
};
推荐阅读
- pyqt5 - 即时填充 Qtablewidget
- mysql - 使用 COALESCE()
- docker - 使用“docker stack deploy”、“docker-compose up”时,Docker 入门第 3 部分“连接被拒绝”有效
- javascript - 说 function 关键字在 JavaScript 中基本上已过时是否正确?
- c# - 如何检测用户更改表单数据?
- macos - 如何获取关闭、小型化和最大化按钮的屏幕坐标?
- vb.net - VISUAL BASIC - 如何将列表框数据源设置为 null
- ruby-on-rails - 如何使用自定义订单保存自定义 ID 而不会在 Rails 中出现同步问题
- influxdb - AS 似乎不适用于 influxDB 连续查询
- swift - 获取 SCNNode 位置和旋转