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

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

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);
});

---

Ajax是一种客户端脚本，它与服务器/数据库进行通信，而无需回发或完全刷新页面。
Ajax的最佳定义是

---

这种Ajax方法用于与服务器交换数据，它只更新网页的一部分

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

什么使ajax在不重新加载页面的情况下工作

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

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

---

希望这对您混合使用jQuery和Knockout有所帮助。提交由jQuery处理如果使用Knockout，则让它处理提交事件添加到

此

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>                 

在Knockout submit事件中，我用

ajaxForm

插件绑定表单，然后提交它。我不确定jQuery插件，我会使用

$.post（）

或

$.ajax（）

您可以在此链接中找到有关淘汰提交的更多信息

我不喜欢这个解决方案，因为您正在删除

self.applications

observable数组的所有内容。最好使用并转换可观察对象中的所有

应用程序

对象（及其内容）。但是使用这种方法，您应该修改ViewModel和视图

更新1（2017年6月19日）

如果此

位于

foreach

循环内，则

自我提交短列表可以是：

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, ...">



希望这有帮助。
谢谢。你对我的补充问题有什么想法吗？谢谢，但是你对我的补充问题有什么想法吗？我想这个链接可能会对你有所帮助。请不要就同一个问题问那么多问题。只问一个问题并编辑它以更改其内容。：-）您可以发布viewmodels
viewModel
和
applicationViewModel
吗？如果
applicationViewModel
在您的viewModel中是可见的，那么您应该编写
viewModel.applicationViewModel（）.isShortlisted（true）在Ajax函数中。也就是说，将
（）
添加到
applicationViewModel
。对于重复的问题，非常抱歉。我在页面中添加了“需要”重新加载以查看更改的脚本部分。Plz帮助这句话
self.applications=ko.observableARay（@Html.Json（Model.applicationcompatibility.Select（o=>o.JsonForm））| |[]定义了一个可观察数组，但其内容不可观察。当您更改属性
isShortListed
时，不会发生任何事情，因为它不是可观察的。您可以使用mapping plugin（）强制其内容可见，但随后您必须更改所有视图模型。非常感谢您，先生。但是，当我将其添加到viewModel时，它会给我一条消息，说“未捕获引用错误：无法处理绑定”foreach:function（）{return filteredApplications}“消息：无法处理绑定”submit:function（）{return submitShortlistForm}“消息：submitShortlistForm未定义”//我假设发生这种情况是因为此表单位于敲除foreach循环中。有解决这个错误的方法吗？@user7677413我更新了我的答案，希望这有帮助。如果不断出现此错误，请尝试将
self.submitShortlistForm
的正文保留为空，以放弃任何语法错误。在这个fiddle（）中，您有一个运行的示例；它显示了三个项目；如果你点击每一个，它就会改变。谢谢。我不再犯错误了。但是根据我的HTML表单的条件，{display:application.isShortlisted===false}，当我单击表单时，它是否应该消失，因为它会将“isShortlisted”更改为true？我还尝试使用控制台将isShortlisted更改为true，但它没有对按钮进行任何更改。您可以在
self.submitShortlistForm
函数中设置断点，以查看
self.applications（）
会发生什么。如果这不起作用，您唯一的解决方案是使用映射插件（）使
isShortlisted
成为可观察的，并更改所有模型和视图。
<form id="shortlistForm" data-bind="submit: $root.submitShortlistForm, ...">