Question

我有两个输入，每个输入都有选项。第一个是药物/疾病，第二个列表具有药物列表和疾病列表，具体取决于为第一个列表选择的选择。

我也有9张“卡片”，其中包含通过发帖请求调用的数据。选择并提交药物后，这9张卡片会将请求提交到药物途径，并显示药物数据。选择并提交疾病后，这9张卡片对疾病路线的邮寄要求不同。我让药卡工作了，但是现在我增加了疾病，因此无法向疾病卡发出后期请求。

我添加了一条if语句，说如果用户选择了Drug，则在提交动作之后，用户将向Drug发出发布请求，而在选择Disease之后，用户将向Disease发送帖子请求。但是，它所做的只是刷新页面。

预期结果是在选择和提交药物时加载带有药物数据的卡片，在选择和提交疾病时加载带有疾病数据的卡片。实际结果是页面刷新。

<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();
  })
}

Answer 1

问题是因为关于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请求是不正确的做法。如果有足够的并发用户，您将可以有效地自己进行DDOS处理。一个更好的主意，特别是考虑到 all 的所有请求都收到相同的数据，那就是发出单个请求，然后返回其中的所有药物/疾病/基因枪支等信息。一个请求。

提交不同的表单输入时如何调用不同的帖子请求

1 个答案: