用 AJAX 调用替换多少内容就太多了?

2024-03-13

我在尝试进行 AJAX 开发时遇到了一个常见问题。在可能的情况下,我喜欢尝试只更新现有布局中的数据,而不是布局本身。例如,采用下面的 div:

<div id="content-5">Here is some content</div>

我会得到更新的值content-5从服务器获取,只需将 content-5 的内容替换为该值即可。这对于简单的数据替换非常有意义,其中值始终以其纯粹的形式显示。

有时内容更复杂,我实际上必须获得的不仅仅是原始数据......也许有一些逻辑来确定如何显示值,也许样式需要根据内部数据而不同。在这种情况下,我通常在服务器端生成 HTML 并将 HTML 注入到元素中,而不仅仅是原始数据。

示例:控制器的状态字段返回为“完整”,但从设计文档来看,“完整”应该向用户显示文本“可用”,并且需要以与其他状态不同的方式设置样式。

在 Javascript 中执行此操作需要模板层可能已经处理的一些深入的视图知识。最终结果是相同的(下面的代码片段),但不同之处在于可能存在一些代码重复和更复杂的 Javascript 层。

<div id="content-5"><span class="success">Available</span></div>

毫无疑问,系统也需要处理“新”内容。最容易实现的解决方案是同时获取所有内容,这样我就不需要处理注入新元素而不是仅替换现有内容的额外复杂性。

因此,我创建一个新模板,将内容包装在另一个带有 ID 的元素中,并在发生更改时同时批量替换所有内容 div。

<div id="allContent">
    <div id="content-1">Some content A</div>
    <div id="content-2">Some content B</div>
    <div id="content-3">Some content C</div>
    <div id="content-4">Some content D</div>
    <div id="content-5">Some content E</div>
</div>

有时候,我不得不想:底线在哪里?在某些时候,我感觉我最终会用 AJAX 请求替换整个页面。这真的会成为问题吗?

我意识到这可能相当主观,但是有哪些好的策略可以确定您应该用 AJAX 替换内容到哪个级别?如果可能的话,仅替换数据似乎是我的首选方法,因为它使 AJAX 控制器非常简单。从模板中替换较大的 HTML 块似乎是处理更复杂的布局和设计问题的最简单方法,而且感觉它可以更容易维护。还有其他我没有考虑过的选择吗?

我预计会有一些关于以编程方式操作 DOM 的讨论,但我个人真的不喜欢这个。代码最终看起来非常糟糕,并且真的开始根据我的喜好将太多的布局和设计集成到 JS 层中。由于我通常使用某种模板库(无论是原始 PHP、Smarty 等 PHP 模板还是 Java 中的 JSP),因此尽可能多地保留视觉设计似乎更有意义。

EDIT

根据前几个答案,这似乎被解读为试图让用户保持在同一页面上,但在网站周围导航,或者在每次更新时以激进的方式更改页面。问题更多的是如何确定 AJAX 调用的布局工作应该发生在哪里,以及使用 AJAX 请求更改大块代码是否是可接受的做法,因为知道替换代码可能看起来与原来的代码几乎相同前。


我认为最重要的要求是刷新要求。如果在几次 AJAX 更新后我点击刷新,我刚刚查看的页面应该是到达的页面。如果页面因任何原因恢复到之前的状态,则该 URL 是错误的。如果由于任何原因您的 AJAX 数据将使浏览器中的 URL 无效,那么您不应该使用 AJAX 来获取该数据。

当然也有例外,数据甚至比最后一个 AJAX 请求还要新。但这显然不是我要说的。实时聊天屏幕可以接收上次 AJAX 请求和刷新之间的更新。没什么大不了。我说的是逻辑内容和描述它的 URL 应该始终保持同步。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

用 AJAX 调用替换多少内容就太多了? 的相关文章

  • 将鼠标悬停在图像上以显示按钮,并且将鼠标悬停在实际按钮上时不会触发

    我试图让按钮在悬停在图像上时出现 以下作品 jQuery show image mouseenter function jQuery the buttons animate opacity 1 1500 mouseout function
  • QTP Web 可扩展性工具包和 ajax

    我正在尝试使用 QTP 测试一个使用 ajax4jsf 来实现 ajax 功能的 Web 应用程序 QTP 无法识别 ajax 何时完成 我读到 QTP 9 5 和 QTP 10 提供的 Web 可扩展性工具包可以解决我的问题 但是 我不明
  • 按下了哪个提交按钮?

    在这个jsfiddle中 http jsfiddle net littlesandra88 eGRRb http jsfiddle net littlesandra88 eGRRb 我是否提交了自动生成的按钮 每个表行都有一个唯一的 ID
  • browserify 错误 /usr/bin/env: 节点: 没有这样的文件或目录

    我通过 apt get install 安装了 node js 和 npm 以及所有依赖项 然后安装了 browserify npm install browserify g 它完成了整个过程 看起来安装正确 但是当我尝试为此做一个简单的捆
  • 如何在CKEditor 5中监听焦点事件

    我想听一下 CKEditor 5 中的焦点事件 我认为这样的事情会起作用 但回调从未被调用 document querySelector editable ClassicEditor create el then editor gt edi
  • 未捕获类型错误:无法解析模块说明符“fs”。相对引用必须以“/”、“./”或“../”开头

    当我尝试在我自己的模块中导入 fs 模块时 例如import as fs from fs 浏览器控制台出现以下错误 Uncaught TypeError Failed to resolve module specifier fs Relat
  • 如何从 URL 字符串中删除某些参数?

    我有这个var存储表示充满参数的 URL 的字符串 我正在使用 AngularJS 我不确定是否有任何有用的模块 或者可能使用纯 JavaScript 来删除不需要的 URL 参数而无需使用正则表达式 例如我需要删除 month 05并且
  • 代码点火器 JSON

    你好 我使用 codeigniter 然后我从控制器中的数据库中回显输出 然后在我的视图文件中执行以下操作 但它没有显示任何内容 S 我的模型文件 function forumList this gt db gt select oversk
  • 为什么“dtoa.c”包含这么多代码?

    我将是第一个承认我对低级编程的整体知识有点稀疏的人 我理解许多核心概念 但我不经常使用它们 话虽这么说 我对需要多少代码感到非常惊讶dtoa c http www netlib org fp dtoa c 在过去的几个月里 我一直致力于用
  • 使用 easyXDM 调整 IFrame 大小

    我将 iFrame 代码提供给客户 以便他们可以显示我网站上的动态内容 我希望其页面上的 iFrame 能够调整大小以适合我的内容 我按照 easyXDM 网站的说明进行操作 但也许我遗漏了一些东西 我没有收到任何错误 但 iFrame 保
  • 如何向尚未添加到页面的元素注册 Javascript 事件处理程序

    我正在尝试构建一个greasemonkey 脚本 它将根据用户与其他动态创建的数据表的交互动态创建数据表 我的问题是 每次创建表时 我都必须进行两次传递 一次用于创建表 另一次用于获取表中我想要添加事件处理程序的所有对象 通过 id 并添加
  • 页面点击其他路径后 $timeout 继续运行

    我在用yo angular fullstack生成器来构建我的网站 当用户注册该网站时 它将发送一封带有链接的激活电子邮件 当用户点击该链接时 会显示激活成功并超时进入主页 但是 当超时未结束 用户点击页面中的任何其他链接时 会跳转到其他页
  • 使用ajax轮询服务器

    我正在建立一个网站 该网站有一个用户可以互相发送消息的系统 我希望这样当登录用户收到消息时 他会在屏幕上看到一些更新告诉他这一点 这些消息不必是实时的 所以我认为我不想用彗星或主宰之类的东西来推动 相反 我很乐意每隔一分钟左右轮询一次服务器
  • 用于导出到 CSV/Excel 的数据 URI(无服务器端请求):浏览器支持/限制?

    以下问题 Javascript 或 Flash 导出至 CSV Excel https stackoverflow com questions 8150516 javascript or flash export to csv excel
  • 如何使用 selenium 获取 javascript 结果?

    我有以下代码 from selenium import selenium selenium selenium localhost 4444 chrome http some site com selenium start sel selen
  • 如何检查jquery数据表中的每个复选框?

    我有一个第一列带有复选框的表格 我使用 jQuery DataTable 插件显示我的表格 我制作了 2 个链接来选择 取消选择每个复选框 这是选择全部的一个 a href Select all a 和 JavaScript functio
  • CryptoJS 和 Pycrypto 一起工作

    我正在使用 CryptoJS v 2 3 加密 Web 应用程序中的字符串 并且需要在服务器上使用 Python 对其进行解密 因此我使用 PyCrypto 我觉得我错过了一些东西 因为我无法让它工作 这是JS Crypto AES enc
  • Tween JS 基础知识之三个 JS 立方体

    我是 Tween JS 的新手 尝试使用 Tween 制作一个向右移动的简单动画 下面是我在 init 函数中的代码 我使用的是三个 JS var geometry new THREE CylinderGeometry 200 200 20
  • Jade(当前称为“Pug”)模板引擎中的循环

    我想使用一个简单的循环 例如for int i 0 i lt 10 i 如何在 Jade 引擎中使用它 我正在使用 Node js 并使用expressjs 框架 例如 for var i 0 i lt 10 i li array i 你可
  • 地址更改时如何停止 Angular 重新加载

    我正在使用 Angular 的scrollTo and anchorScroll像这样 app controller TestCtrl function scope location anchorScroll scope scrollTo

随机推荐

  • c getline 跳过空行

    while getline line line size f 1 I m using this function to read line line But i want to know when i m reading a blank l
  • c char 指针问题

    如果我们声明char p hello 那么由于它被写入数据部分 我们无法修改p指向的内容 但我们可以修改指针本身 但我在 C Traps and Pitfalls 中找到了这个例子 安德鲁 科尼格 AT T贝尔实验室 默里山 新泽西州 07
  • 获取 Instagram 上用户的性别

    我只是想知道是否有办法在 Instagram 上获取用户的性别 我浏览了 Instagram 的 api 从 users userId 获取的用户信息不包含性别信息 感谢您的帮助 NO 目前还没有办法从API获取instagram用户的性别
  • UTF-8 文本(印地语)未显示在浏览器窗口或 Eclipse 控制台上

    我必须在浏览器屏幕上显示印地语 或任何区域语言 的文本 我将从数据库中获取此文本 为此 我从以下几个方面开始 String escapedStr u0905 u092d u0940 u0938 u092e u092f u0939 u0948
  • 在Python中找到分数列表的最小公分母

    我有一个分数列表 from fractions import Fraction fractions list Fraction 3 14 Fraction 1 7 Fraction 9 14 输出应该是一个列表 其中包含每个分数的分子 最后
  • React - 将所有数据从 json 加载到组件中

    我正在使用 React 并尝试将数据从本地 json 文件加载到我的组件中 我试图打印所有信息 包括名称 值对中的 名称 不仅仅是值 使其看起来像一个表单 我正在寻找最好的方法来做到这一点 我需要解析吗 我需要使用地图功能吗 我是 Reac
  • 在 PHP 中获取数组的最后一个元素而不更改数组? [复制]

    这个问题在这里已经有答案了 array pop 将其从数组中删除 end 改变内部指针 唯一的方法真的像这样 my array array pop array keys my array 这有效 list end array slice a
  • 如何检查 window.external 上是否存在函数

    如何检查 window external 上是否存在函数 我正在从 javascript 调用 C 代码 并且想检查 C 对象中是否存在方法 我找到了路 只需使用 in 运算符 如下所示 if FunctionName in window
  • 元组的串联

    普通文本 我在 python 3 2 1 上编码时遇到一些问题 实际上我正在参加有关 python 2 5 的在线讲座 这是代码 x 100 divisors for i in range 1 x if x i 0 divisors div
  • 在 bash shell 中打印星号(“*”)

    a 5 echo aMin bash etc init d ckDskCheck sh 当我尝试运行以下代码时 它会正确显示 5 bash etc init d ckDskCheck sh 但是 当我尝试使用以下代码将结果分配给变量并将其打
  • 快速使用未解析的标识符“UIApplicationStateInactive”

    在我处理推送通知的 Swift 代码中 我有这一行 if application applicationState UIApplicationStateInactive application applicationState UIAppl
  • 如何在sqlite android中插入多行

    我有一种方法可以将值插入到sqlite在一个班级里 在主要活动中 我正在解析 json 值并尝试将这些值插入到sqlite在循环中 因为我必须插入不止一行 但只有一行被添加到数据库中 添加多行的方法如下 public void addSes
  • 如何访问SetDefaultContentHeaders中的底层对象?

    我有一个 Web api 我在其中返回一个对象 当我使用接受标头 image jpg 时 我想要该对象的图像表示形式 但我想根据我返回的对象设置文件名 我已经实施了一个BufferedMediaTypeFormatter并认为我应该在方法中
  • 如何在 Windows 中使用本地路径访问 Subversion 存储库?

    我安装了 CollabNet Subversion 服务器和客户端 运行附带的 Apache 从服务器上的命令行 我可以使用类似的路径轻松访问存储库 http server port svn repository 但我无法使用它在磁盘上的实
  • 类似 git 界面的最佳方法

    我正在编写一个小型命令行待办事项应用程序 它具有类似于 git 的通用界面 它可以执行多项任务 add list complete 所有这些都应该可以通过todo
  • docker容器主机名顺序号

    在 docker swarm 中存在副本 规模的情况下 是否有任何选项可以让主机名 容器名具有一些序列号 version 3 services serA image someimage1 hostname serA serB image s
  • 在 C# 中将字符串存储为 UTF8

    我在 C 中进行了大量的字符串操作 并且确实需要将字符串每个字符存储一个字节 这是因为我需要在内存中同时存储千兆字节的文本 这会导致内存不足的问题 我确信该文本永远不会包含非 ASCII 字符 因此就我的目的而言 System String
  • 一个类可以从类本身内部取消吗?

    例如 此代码有效吗 class abc int x y abc int x int y this x x this y y while true update public void update x y if y 0 this null
  • Python的seek函数是如何工作的?

    如果我有一些类似文件的对象并执行以下操作 F open abc r loc F tell F seek loc 10 寻求有什么作用 是从文件开头开始读取loc 10字节 或者它是否足够聪明 只备份 10 个字节 它是特定于操作系统和 li
  • 用 AJAX 调用替换多少内容就太多了?

    我在尝试进行 AJAX 开发时遇到了一个常见问题 在可能的情况下 我喜欢尝试只更新现有布局中的数据 而不是布局本身 例如 采用下面的 div div Here is some content div 我会得到更新的值content 5从服务