Question

我对jquery / javascript不太好，我在这里复制代码，并且想要使它成为一个jQuery函数，所以我不必复制代码。

我的HTML Season和SeasonID中有两个文本框。每当这两个文本框中的任何一个松散焦点时，我都想做同样的事情。

将它们放在javascript对象中，并向我的MVC Controller发送包含该对象的AJAX调用。

我想将重复的代码变成一个函数，但不知道该怎么做。有什么建议吗？

    <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运算符而不是if条件并使用jquery逗号分隔符将处理程序附加到一行中的两个元素来清理代码。

我如何使这成为一个jquery函数？

1 个答案: