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

Question

我正在尝试通过单击按钮来更新清单的状态。 我可以通过对清单项目进行单独的 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>

`

Answer 1

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

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

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

(pass, fail, inprog, pend)