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

How does AJAX work without reloading the page?

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

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 方法用于与服务器交换数据，它只更新网页的部分

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/268820.html

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

How does AJAX work without reloading the page?

相关推荐

发表回复