Question

我有一个选择表单，目前有三个选项，根据用户选择的内容，AJAX调用会发送到某个URL。这是我目前的代码：

$("#Option").on("change", function(){
   $choice = $(this).val();
   switch($selection) {
   case "A": 
       $("form").submit(function(){
           //ajax call
       }
       break;
   case "B": 
       $("form").submit(function(){
           //ajax call
       }
       break;
   case "C": 
       $("form").submit(function(){
           //ajax call
       }
       break;
   }
   default: 
    //default
});

虽然这有效，但我觉得有一种更简洁的方法可以做到这一点而不是重复AJAX调用而只是改变URL。

Answer 1

如果您只是更改网址，请将其分配给变量。将表单提交函数和ajax调用移到switch语句之外。

$("#Option").on("change", function(){
   $choice = $(this).val();

   var url = "";

   switch($selection) {
   case "A": 
       url = "...";
       break;
   case "B": 
       url = "...";
       break;
   case "C": 
       url = "...";
       break;
   default: 
       //default
   }

    $("form").submit(function(){
      $.ajax({
         url: url,
         // other stuff
      });
    }
});

Answer 2

取决于提交内容之间的变化，例如

如果它只是网址，则可以使用

$("#Option").on("change", function(){
    $choice = $(this).val();
    $url = false;
    switch($selection) {
        case "A": 
            $url="/urlA";
            break;
        case "B": 
            $url="/urlB";
            break;
        case "C": 
            $url="/urlC";
            break;
    }
    if ($url){
        //change "action" attribute
        $("form").attr("action",$url);
        //trigger "submit" event
        $("form").trigger("submit");
    }
});
$("form").submit(function(ev){
    ev.preventDefault();
    $.ajax({
        url: $(this).attr("action"),
        method: ($(this).attr("method") || "GET");
        data: $(this).serialize();
    }).done(function(ajaxResponse) {
        console.log(ajaxResponse)
    });
});

Answer 3

您应该移动switch-case表格submit，并为url设置$.ajax()

$("form").submit(function() {
    var $choice = $("#Option").val();
    var url = "";
    switch ($choice) {
        case "A":
            url = "...";
            break;
        case "B":
            url = "...";
            break;
        case "C":
            url = "...";
            break;
        default:
            //default
    }
    $.ajax({
        url: url,
        // other stuff
    });
});

有没有办法在不违反DRY的switch语句中执行AJAX调用？

3 个答案: