AJAX 如何在不重新加载页面的情况下工作？

Question

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

JS & 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

您正在将 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, ...">

希望这会有所帮助。

Answer 3

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