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


How does AJAX work without reloading the page?

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

JS

相关讨论

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

What makes ajax work without reloading the page?

在回答您的问题时，"异步"任务可以与其他任务一起执行，无需等待其他任务完成(同步)。因此，您无需重新加载/刷新页面即可显示新信息，因为它是同时执行的。

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

您可以在此处阅读有关 AJAX 的更多信息

希望对你有所帮助

相关讨论

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

的提交事件

1
2
3
4
5
6
7
<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">
    </button>
</form>

然后，在您的视图模型中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
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().

您可以在此链接中找到有关 Knockout 提交的更多信息。"提交"绑定。

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

更新 1 (19/06/2017)

如果这个 <form> 在 foreach 循环内，那么 self.submitShortlistForm 可能是这样的：

1
2
3
4
5
6
7
8
9
10
11
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:

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

希望这会有所帮助。

相关讨论

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

相关讨论