如何在提交不同的表单输入时调用不同的post请求
如何在提交不同的表单输入时调用不同的post请求
提问于 2019-07-18 15:04:57
我有两个输入，每一个都有选择。第一个是药物/疾病，第二个列表有药物列表和疾病列表，这取决于为第一个列表选择的选择。
我也有九个“卡片”的数据，这是被称为邮政请求。当选择和提交药物时，这九张卡片会向毒品路线提交邮寄请求，并显示药物数据。当选择和提交疾病时，九张卡片对疾病路线有不同的邮寄请求。我让毒品卡起作用了，但现在我增加了疾病，我不能对疾病卡提出邮寄请求。
我添加了一个if语句，如果用户选择Drug，在提交操作之后，用户将向Drug发出post请求，在选择Disease之后，用户将向Disease发出post请求。HOwever所做的就是刷新页面。
预期的结果是，在选择和提交药物时，卡片装载药物数据，在选择和提交疾病时，卡片装载疾病数据。实际结果是页面刷新。
<div class="form-group">
<select id="memoryType" class="form-control firstList">
<option value="select" selected="selected">Select</option>
<option value="drug">Drug</option>
<option value="disease">Disease</option>
</select>
</div>
<div class="form-group">
<select id="drugInput" class="form-control search-input secondList">
<option value="select" selected="selected">...</option>
</select>
<div class="form-group">
<button class="form-control" id="submit"><i class="fas fa-search"></i></button>
</div>var selectedOption = $('#memoryType option:selected').val();
if (selectedOption.toLowerCase() == "drug") {
$("#submit").click(function(event) {
alert("Submitted")
var text = $("#drugInput option:selected").val();
var search = JSON.stringify({
"input": text
});
console.log("submit");
$.post("/L1000", search, function(data) {
$(".card-1").html(data);
})
$.post("/creeds_drugs", search, function(data) {
console.log(data);
$(".card-2").html(data);
})
$.post("/creeds_diseases", search, function(data) {
console.log(data);
$(".card-3").html(data);
})
$.post("/geneshot", search, function(data) {
console.log(data);
$(".card-4").html(data);
})
$.post("/gwas_drugs", search, function(data) {
console.log(data);
$(".card-5").html(data);
})
$.post("/x2kl1000", search, function(data) {
console.log(data);
$(".card-7").html(data);
})
$.post("/x2k_creeds", search, function(data) {
console.log(data);
$(".card-8").html(data);
})
$.post("/L1000_diseases", search, function(data) {
$(".card-1").html(data);
})
event.preventDefault();
})
} else if (selectedOption.toLowerCase() == 'disease') {
$("#submit").click(function(event) {
var text = $("#drugInput option:selected").val();
var search = JSON.stringify({
"input": text
});
console.log("submit");
$.post("/L1000_diseases", search, function(data) {
$(".card-1").html(data);
})
$.post("/creeds_dx_dx", search, function(data) {
console.log(data);
$(".card-3").html(data);
})
event.preventDefault();
})
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-18 15:13:24
问题在于，对于if语句在click处理程序之外，您的逻辑是向后的--因为这意味着它只有在页面加载时才会运行。相反，当if碰巧知道当前选择的选项是什么时，您需要进行click条件检查。
您还会在if语句的两边重复一些常见的逻辑，这些逻辑可能会干涸。试试这个：
$("#submit").click(function(e) {
e.preventDefault();
var selectedOption = $('#memoryType option:selected').val();
var text = $("#drugInput option:selected").val();
var search = JSON.stringify({ "input": text });
if (selectedOption.toLowerCase() == "drug") {
// $.post requests...
} else if (selectedOption.toLowerCase() == 'disease') {
// $.post requests...
}
})但是，虽然这解决了逻辑问题，但是您应该知道，向服务器发出这么多AJAX请求是错误的做法。如果有足够多的并发用户，那么您实际上就是DDOSing了。一个更好的想法，尤其是考虑到所有的请求都接收相同的数据，将是提出一个单一的请求，然后返回所有的药物/疾病/基因等信息，在这一请求。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57097581
复制相关文章
相似问题
腾讯云开发者
