Question

我有一个代码（不是由我编写）的按钮，用于为某个人添加书签并将其添加到候选名单中。它看起来像这样：

JS＆amp; Ajax部分：

self.isShortlisted = ko.observable(@(Model.Application.IsShortlisted ? "true" : "false" ));

self.isHidden = ko.observable(@(Model.Application.IsHidden ? "true" : "false" ));

$('form#shortlistForm').ajaxForm(function () {
    viewModel.applicationViewModel.isShortlisted(true);
});

$('form#unshortlistForm').ajaxForm(function () {
    viewModel.applicationViewModel.isShortlisted(false);
});

Answer 1

AJAX代表“异步JavaScript和XML”，正如您所指出的，它用于执行任务而无需重新加载页面。

是什么让ajax在没有重新加载页面的情况下工作？

在回答您的问题时，“异步”任务可以与其他任务一起执行，而不需要等待其他事情完成（同步）。因此，您无需重新加载/刷新页面以显示同时执行的新信息。

AJAX使用xhttp请求通常从Web服务器返回JSON对象。您可以操纵DOM，JavaScript或HTML以向用户显示对象。

You can read more about AJAX here

希望这有点帮助

Answer 2

Ajax 是 客户端脚本 ，可与服务器/数据库进行通信，无需回发或完整页面刷新。
Ajax的最佳定义是 此Ajax方法用于与服务器交换数据，它只更新网页的部分

Answer 3

您正在将jQuery与Knockout混合使用。提交由jQuery处理。 如果你使用Knockout，那就让它来处理提交事件，添加到<form>这个submit: submitShortlistForm,：

<form id="shortlistForm" data-bind="submit: submitShortlistForm, style: { display: application.isShortlisted === false ? 'inline-block' : 'none'}, attr: {action: '@(MVC.GetLocalUrl(MVC.HireOrgJobApplication.ViewApplication(Model.CurrentOrganization.CustomUrl, Model.Job.JobKey, "xxx/ajax-shortlist")))'.replace('xxx', application.applicationKey)}" method="post" style="display:inline;">
    @Html.AntiForgeryToken()
    <input type="hidden" name="ApplicationKey" data-bind="attr:{ value : application.applicationKey }" />
    <button type="submit" class="btn-act jui-tooltip" title="Shortlist">
        <i class="fa fa-2x fa-star"></i>
    </button>
</form>

然后，在您的视图模型中添加以下内容：

self.submitShortlistForm = function(){
    // I think is better to use $.post() or $.ajax().
    // I use the pluging because is in your question.
    $('form#shortlistForm').ajaxForm(function () {
        // Allways change position [0] of the observable array
        self.applications()[0].isShortlisted = true;

        var data = self.applications().slice(0);
        self.applications([]);
        self.applications(data);
    });
    $(this).ajaxSubmit();
}

在Knockout提交事件中，我将表单与ajaxForm插件绑定，然后我提交它。我不确定jQuery插件，我会使用$.post()或$.ajax()。

您可以在此链接The "submit" binding找到有关Knockout提交的更多信息。

我不喜欢这个解决方案，因为您要删除self.applications可观察数组的所有内容。最好使用mapping plugin并将所有application个对象（及其内容）转换为可观察对象。但是使用这种方法，您应该修改ViewModel和视图。

更新1（19/06/2017）

如果此<form>位于foreach循环内，那么self.submitShortlistForm可能就是这样：

self.submitShortlistForm = function(application){
    $('form#shortlistForm').ajaxForm(function () {
        // Updates the current row element.
        application.isShortlisted = true;

        var data = self.applications().slice(0);
        self.applications([]);
        self.applications(data);
    });
    $(this).ajaxSubmit();
}

和html：

<form id="shortlistForm" data-bind="submit: $root.submitShortlistForm, ...">

希望这有帮助。

如果没有重新加载页面，AJAX如何工作？

3 个答案: