如何使用 ajax 调用更新清单的状态答案

【问题标题】：How to update the status of the checklist with ajax call如何使用 ajax 调用更新清单的状态
【发布时间】：2018-10-24 23:06:04
【问题描述】：

我正在尝试通过单击按钮来更新清单的状态。我可以通过对清单项进行单独的 ajax 调用来实现它，还是可以通过一个调用来实现它并在完成后立即更新它。

我附上了它的外观和我想要实现的模板。

很抱歉尝试上传 CSS 图像文件，但无法上传。

这个样子

提前致谢。`

div {
  width: 30%;
  top: 50%;
  left: 50%;
  border: 1px solid black;
}

ul {
  list-style: none;
  width: 30%;
}

li {
  padding-top: 20px;
}

img {
  float: right;
  display: inline;
  text-align: middle;
  transition: all .2s ease;
}

.pass {
  background: url('status1.png') no-repeat -2px -47px;
  width: 20px;
  height: 20px;
}

.fail {
  background: url('status1.png') no-repeat -2px -70px;
  width: 20px;
  height: 20px;
}

.inprog {
  background: url('status1.png') no-repeat -2px -25px;
  width: 20px;
  height: 20px;
}

.pend {
  background: url('status1.png') no-repeat -2px -3px;
  width: 20px;
  height: 20px;
}

<div>
  <h4> Please Wait...... Performing checks on</h4>
  <ul>
    <li> check1 <img src="img_trans.gif" class="pass" /></li>
    <li> check2 <img src="img_trans.gif" class="fail" /></li>
    <li> check3 <img src="img_trans.gif" class="inprog" /></li>
    <li> check4 <img src="img_trans.gif" class="pend" /></li>
  </ul>
</div>

【问题讨论】：

删除默认分配的类（pass、fail、inprog、pend）并根据状态在 Ajax 调用成功时分配它。
您应该在此处显示您在 javascript 代码中已经获得的内容。
这里的答案是非常符合上下文的，如果每个项目涉及的处理足够高以证明单独发送它们是合理的，那么这是有道理的。每个项目都可以在 UI 中更新其相应的状态。否则，您不妨打一个电话并一次性更新 UI
您无法通过一次大型调用从 ajax 调用中获得间歇性更新。相反，您将需要嵌套的 ajax 调用。开始调用 1，调用 1 成功时执行调用 2，依此类推。
谢谢，Rich 和 Matt。我正在探索是否有任何其他选项可以从 ajax 调用中获取中间结果。指出点。感谢您的回复。

标签： javascript jquery html css ajax

【解决方案1】：

你可以通过两种方式做到这一点

1)进行ajax调用并准备内容并追加

2）再次进行 ajax 调用并根据响应动态分配您的类

(pass, fail, inprog, pend)

【讨论】：