【发布时间】：2018-12-07 04:23:18
【问题描述】：
我目前正在努力使用将 json 发布到 nodejs 路由的 ajax。我想获得 4 个按钮组的选定值。按钮组具有以下 ID：质量、成本效益、交付范围和评级。每个按钮组包含 5 个单选按钮，其值具有自己的 id，例如 quality1 或 quality2。这些按钮的值范围从 1 到 5。
我的猜测是我错过了这里提到的东西：How do I return the response from an asynchronous call?
$(document).ready(function () {
// SUBMIT FORM
$("#ratingForm").submit(function (event) {
// Prevent the form from submitting via the browser.
event.preventDefault();
ajaxPost();
});
function ajaxPost() {
// PREPARE FORM DATA
let ratingData = {
quality: $('input[name=options]:checked', '#quality').val(),
costeffectiveness: $('input[name=options]:checked', '#costeffectiveness').val(),
deliveryscope: $('input[name=options]:checked', '#deliveryscope').val(),
contentment: $('input[name=options]:checked', '#contentment').val()
};
// DO POST
$.ajax({
type: "POST",
contentType: "application/json",
url: "/rating",
data: JSON.stringify(ratingData),
dataType: 'json',
success: function (rating) {
$("#ratingResultDiv").html("<p>" +
"Post Successfully! <br>" +
"--->" + JSON.stringify(rating) + "</p>");
},
error: function (e) {
alert("Error!");
console.log("ERROR: ", e);
}
});
}
});
当我以不同的方式分配变量并更改预期 json 的路径时，它就像一个魅力：
// PREPARE FORM DATA
let formData = {
firstname: $("#firstname").val(),
lastname: $("#lastname").val()
};
工作。
NodeJS 路由：
router.post('/rating', function (req, res, next) {
console.log("RATINGS: " + JSON.stringify(req.body));
console.log(req.body.quality);
console.log(req.body.costeffectiveness);
console.log(req.body.deliveryscope);
console.log(req.body.contentment);
let rating = {};
rating.quality= req.body.quality;
rating.costeffectiveness = req.body.costeffectiveness;
rating.deliveryscope = req.body.deliveryscope;
rating.contentment = req.body.contentment;
return res.send(rating);
HTML：
<form method="POST" action="/rating">
<form id="ratingForm">
<div class="form-group">
<p class="my-2">Quality</p>
<div class="btn-group btn-group-lg btn-group-toggle" id="quality"
data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="quality" id="quality1" value="1"
autocomplete="off" checked>
1
</label>
<label class="btn btn-primary">
<input type="radio" name="quality" id="quality2" value="2"
autocomplete="off"> 2
</label>
<label class="btn btn-primary">
<input type="radio" name="quality" id="quality3" value="3"
autocomplete="off"> 3
</label>
<label class="btn btn-primary">
<input type="radio" name="quality" id="quality4" value="4"
autocomplete="off"> 4
</label>
<label class="btn btn-primary">
<input type="radio" name="quality" id="quality5" value="5"
autocomplete="off"> 5
</label>
</div>
<p class="my-2">Cost Effectiveness</p>
<div class="btn-group btn-group-lg btn-group-toggle" id="cost-effectiveness"
data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="costeffectiveness" id="cost_effectiveness1" value="1"
autocomplete="off"
checked> 1
</label>
<label class="btn btn-secondary">
<input type="radio" name="costeffectiveness" id="cost_effectiveness2" value="2"
autocomplete="off">
2
</label>
<label class="btn btn-secondary">
<input type="radio" name="costeffectiveness" id="cost_effectiveness3" value="3"
autocomplete="off">
3
</label>
<label class="btn btn-secondary">
<input type="radio" name="costeffectiveness" id="cost_effectiveness4" value="4"
autocomplete="off">
4
</label>
<label class="btn btn-secondary">
<input type="radio" name="costeffectiveness" id="cost_effectiveness5" value="5"
autocomplete="off">
5
</label>
</div>
<p class="my-2">Delivery Scope</p>
<div class="btn-group btn-group-lg btn-group-toggle" id="delivery-scope"
data-toggle="buttons">
<label class="btn btn-info active">
<input type="radio" name="deliveryscope" id="delivery_scope1" value="1"
autocomplete="off"
checked> 1
</label>
<label class="btn btn-info">
<input type="radio" name="deliveryscope" id="delivery_scope2" value="2"
autocomplete="off">
2
</label>
<label class="btn btn-info">
<input type="radio" name="deliveryscope" id="delivery_scope3" value="3"
autocomplete="off">
3
</label>
<label class="btn btn-info">
<input type="radio" name="deliveryscope" id="delivery_scope4" value="4"
autocomplete="off">
4
</label>
<label class="btn btn-info">
<input type="radio" name="deliveryscope" id="delivery_scope5" value="5"
autocomplete="off">
5
</label>
</div>
<p class="my-2">Contentment</p>
<div class="btn-group btn-group-lg btn-group-toggle" id="contentment"
data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="contentment" id="contentment1" value="1"
autocomplete="off"
checked>
1
</label>
<label class="btn btn-secondary">
<input type="radio" name="contentment" id="contentment2" value="2"
autocomplete="off"> 2
</label>
<label class="btn btn-secondary">
<input type="radio" name="contentment" id="contentment3" value="3"
autocomplete="off"> 3
</label>
<label class="btn btn-secondary">
<input type="radio" name="contentment" id="contentment4" value="4"
autocomplete="off"> 4
</label>
<label class="btn btn-secondary">
<input type="radio" name="contentment" id="contentment5" value="5"
autocomplete="off"> 5
</label>
</div>
<div class="modal-footer my-4">
<button type="submit" class="btn btn-lg btn-primary btn-block">Submit rating
</button>
</div>
</div>
</form>
</form>
【问题讨论】：
-
我可以看到你的 HTML 标记为那些复选框吗？加上这个
$('input[name=options]:checked', '#quality')在我看来是错误的。你想达到什么目的？ -
问题是：为什么？你的 ajax-post-request 添加了什么？如果你有一个带有输入的表单和一个表单方法 post，那么使用 ajax 是完全没有必要的......
-
@Romeo 我试图在带有上述行的按钮组中获取选中的单选按钮。添加了 HTML 标记。
-
反正问题出在
$('input[name=options]:checked', '#quality')。这个选择对 jQuery 引擎没有意义。 -
@RomeoSierra 谢谢你！从stackoverflow得到那个sn-p。您将如何获得这些信息 - 甚至更好：您将使用什么样的按钮/输入来允许从 1 到 5 的“评分”？
标签： javascript jquery json node.js ajax