我如何使這個jQuery功能？

Question

我不擅長jquery/javascript，我在這裏複製代碼，並且想讓它成爲一個jQuery函數，所以我不必複製代碼。

我有兩個文本框在我的HTML季節和SeasonID。每當這兩個文本框中的任何一個鬆散焦點時，我都想做同樣的事情。

把它們放在一個JavaScript對象中，併發送一個AJAX調用到包含該對象的MVC控制器。

我想重複代碼到一個函數，但不知道如何去做。 有什麼建議嗎？

<div class="season form-group"> 
     <label class="control-label col-md-2" for="Season">Season</label> 
     <div class="col-md-10"> 
      <input class="form-control text-box single-line" data-val="true" data-val-number="The field Season must be a number." id="Season" name="Season" type="number" value="" /> 
      <span class="field-validation-valid text-danger" data-valmsg-for="Season" data-valmsg-replace="true"></span> 
     </div> 
    </div> 

    <div class="season form-group"> 
     <label class="control-label col-md-2" for="SeasonID">Season ID</label> 
     <div class="col-md-10"> 
      <input class="form-control text-box single-line" data-val="true" data-val-number="The field Season ID must be a number." id="SeasonID" name="SeasonID" type="number" value="" /> 
      <span class="field-validation-valid text-danger" data-valmsg-for="SeasonID" data-valmsg-replace="true"></span> 
      <span id="ScenarioSeasonSeasonIDValidation" class="validation"></span> 
     </div> 
    </div> 

<script> 
    $(function() { 
     $('#Season').focusout(function() { 
      if (jQuery.trim($('#Season').val()).length > 0) { 
       if (jQuery.trim($('#SeasonID').val()).length > 0) { 

        var seasonSeasonID = { Season: $('#Season').val(), SeasonID: $('#SeasonID').val() }; 

        console.log(seasonSeasonID) 

        $.ajax({ 
         contentType: "application/json", 
         data: { seasonSeasonIDJson : JSON.stringify(seasonSeasonID) }, 
         datatype: 'json', 
         error: function() { 
          $('ScenarioSeasonSeasonIDValidation').html('An Error Has Occurred'); 
         }, 
         format: 'json', 
         success: function (response) { 
          if (response != null) { 
           if (response) { 
            $('#ScenarioSeasonSeasonIDValidation').html('Scenario Season/Season ID combination already submitted'); 
            $('form').submit(function (e) { 
             e.preventDefault(); 
            }); 
           } 
          } 
         }, 
         url: '@Url.Action("SeasonSeasonIDExists", "PFSContent")' 
        }) 
       } 
      } 
     }); 

     $('#SeasonID').focusout(function() { 
      if (jQuery.trim($('#SeasonID').val()).length > 0) { 
       if (jQuery.trim($('#Season').val()).length > 0) { 

        var seasonSeasonID = { Season: $('#Season').val(), SeasonID: $('#SeasonID').val() }; 

        console.log(seasonSeasonID) 

        $.ajax({ 
         contentType: "application/json", 
         data: { seasonSeasonIDJson: JSON.stringify(seasonSeasonID) }, 
         datatype: 'json', 
         error: function() { 
          $('ScenarioSeasonSeasonIDValidation').html('An Error Has Occurred'); 
         }, 
         format: 'json', 
         success: function (response) { 
          if (response != null) { 
           if (response) { 
            $('#ScenarioSeasonSeasonIDValidation').html('Scenario Season/Season ID combination already submitted'); 
            $('form').submit(function (e) { 
             e.preventDefault(); 
            }); 
           } 
          } 
         }, 
         url: '@Url.Action("SeasonSeasonIDExists", "PFSContent")' 
        }) 
       } 
      } 
     }); 
    ); 
</script> 

我的控制器代碼在這裏。

public JsonResult SeasonSeasonIDExists(string seasonSeasonIDJson) 
{ 
    JavaScriptSerializer js = new JavaScriptSerializer(); 
    PFSScenario scenario = js.Deserialize<PFSScenario>(seasonSeasonIDJson); 
    bool scenarioExists = db.PFSScenarios.Any(x => x.Season == scenario.Season && x.SeasonID == scenario.SeasonID); 

    return Json(scenarioExists, JsonRequestBehavior.AllowGet); 
} 

Answer 1

安裝它作爲一個處理程序之前就爲它定義一個函數：

function getServerData(){ 
    if (jQuery.trim($('#Season').val()).length > 0 && jQuery.trim($('#SeasonID').val()).length > 0) { 

       var seasonSeasonID = { Season: $('#Season').val(), SeasonID: $('#SeasonID').val() }; 

       console.log(seasonSeasonID) 

       $.ajax({ 
        contentType: "application/json", 
        data: { seasonSeasonIDJson : JSON.stringify(seasonSeasonID) }, 
        datatype: 'json', 
        error: function() { 
         $('ScenarioSeasonSeasonIDValidation').html('An Error Has Occurred'); 
        }, 
        format: 'json', 
        success: function (response) { 
         if (response != null) { 
          if (response) { 
           $('#ScenarioSeasonSeasonIDValidation').html('Scenario Season/Season ID combination already submitted'); 
           $('form').submit(function (e) { 
            e.preventDefault(); 
           }); 
          } 
         } 
        }, 
        url: '@Url.Action("SeasonSeasonIDExists", "PFSContent")' 
       }) 

     } 
} 

$('#SeasonID, #Season').focusout(getServerData); 

我也通過使用AND運算符，而不是到如果條件和使用jQuery逗號清理你的代碼位分隔符將處理程序附加到一行中的兩個元素。