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

丹青 • • 问答 • 282 阅读

How does AJAX work without reloading the page?

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

JS

相关讨论

  • 请不要就同一个问题问太多问题。只问一个问题并对其进行编辑以更改其内容。 🙂
  • 你能发布视图模型 viewModel 和 applicationViewModel 吗？
  • 如果 applicationViewModel 在您的 ViewModel 中是可观察的，那么您应该在 Ajax 函数中编写 viewModel.applicationViewModel().isShortlisted(true);。即，将 () 添加到 applicationViewModel。
  • 对重复的问题感到抱歉。我添加了"需要"重新加载以查看更改的页面的脚本部分。请帮忙
  • 这句话self.applications = ko.observableArray(@Html.Json(Model.ApplicationCompatibiliti??es.Select(o => o.JsonForm)) || []);定义了一个可观察的数组，但是它的内容是不可观察的。当您更改属性 isShortListed 时，没有任何反应，因为它不是可观察的。您可以使用映射插件 (knockoutjs.com/documentation/plugins-mapping.html) 强制其内容可观察，但随后您必须更改所有视图模型。
  • 当您更改 isShortListed 时，您可以添加此解决方案：stackoverflow.com/a/13231783/4065876。这是一个小提琴(jsfiddle.net/L39h30je)。第一次显示 true, false, true。如果单击该按钮，则第二个值更改为 true，然后显示 true, true, true。
  • 太感谢了。那么我如何将它应用到我的代码中呢？您向我展示的一个是硬编码的 viewModel，但地雷是从服务器检索的。根据我在问题中写的 viewModel，我该如何应用它？
  • 我编辑并添加了更改后的代码。当我这样做时，它给了我一个错误，上面写着：self.applications 不是函数。任何的想法？另外，我的代码的问题是它将它"发布"到一个特定的链接，即 /ajax-shortlist。您的解决方案是否也适用于这种情况？

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

希望这会有所帮助。

相关讨论

  • 先生非常感谢您。但是当我将它添加到我的 viewModel 时，它给了我一条消息说"未捕获的 ReferenceError：无法处理绑定"foreach：函数(){返回过滤的应用程序}"消息：无法处理绑定"提交：函数() {return submitShortlistForm }" Message: submitShortlistForm is not defined" // 我假设发生这种情况是因为该表单位于淘汰赛 foreach 循环中。有解决此错误的方法吗？
  • @user7677413 我更新了我的答案，希望这会有所帮助。如果您不断收到此错误，请尝试将 self.submitShortlistForm 的主体留空，以丢弃任何语法错误。在这个小提琴(jsfiddle.net/L39h30je/2)中，您有一个正在运行的示例；它显示三个项目；如果你点击每一个，它就会改变。
  • 谢谢。我不再收到错误消息。但是根据我的 HTML 表单的条件，{ display: application.isShortlisted === false }，当我单击表单时它不应该消失，因为它会将"isShorlisted"更改为 true 吗？我还尝试使用控制台将 isShortlisted 更改为 true，但它没有对按钮进行任何更改。
  • 您可以在 self.submitShortlistForm 函数中放置一个断点，以查看 self.applications() 会发生什么。如果这不起作用，您唯一的解决方案是使用映射插件 (knockoutjs.com/documentation/plugins-mapping.html) 使 isShortlisted 成为可观察对象，并更改所有模型和视图。

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

相关讨论

  • 谢谢，但你对我的附加问题有什么想法吗？
  • 我认为此链接可能对您有所帮助。 knockoutjs.com/documentation/json-data.html
以上是关于javascript：AJAX如何在不重新加载页面的情况下工作？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>