我已经以bs4模态构建了一个表单,并使用ajax函数将表单数据发布到我的API。 (以后还会拍摄照片)
表格
<form id="makeOfferForm">
<div class="form-group">
<label for="exampleFormControlTextarea1">Offer Description</label>
<textarea class="form-control" id="offerDesc" rows="3" name="offerDesc"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Offer Price</label>
<input type="text" class="form-control" id="offerPrice" placeholder="£230" name="offerPrice">
</div>
<div class="form-group">
<label class="mr-sm-2" for="inlineFormCustomSelect">Postage</label>
<select class="" id="inlineFormCustomSelect" name="offerPostage">
<option value="ND">Next Day</option>
<option value="3D">3 Days</option>
<option value="7D">7 Days</option>
</select>
</div>
<div class="form-group">
<label class="mr-sm-2" for="inlineFormCustomSelect">Condition</label>
<select class="" id="inlineFormCustomSelect" name="offerCondition">
<option value="N1">New (with labels)</option>
<option value="N2">New (other)</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="form-check float-right">
<button id="makeOfferSubmit" type="submit" class="btn btn-primary">Submit Offer</button>
</div>
</form>
提交表单
$('#makeOfferSubmit').click(function(e){
e.preventDefault();
$.post('/offers/makeanoffer',
$('#makeOfferForm').serialize(),
function(data, status, xhr){
// do something here with response;
console.log("data is:" + data + "Status is:" + status)
});
});
API POST端点
[![router.post("/makeanoffer", function ensureAuthenticated(req, res) {
// create an incoming form object
var form = new formidable.IncomingForm();
form.multiples = true;
form.parse(req);
form.on("field", function(field, value) {
console.log("field: ", field);
console.log("value: ", value);
});
});
我还应该在调试屏幕截图中输入广告。您可以看到我的请求正文中确实包含有问题的表单,因此已将其发送出去。