javascript - HTML 输入 AJAX 更新 - 使用 Bootstrap 将样式添加到输入字段

Question

我正在对 html 表单进行一些更改，以便在用户退出字段时执行 AJAX 更新。我对 Javascript 和 AJAX 很陌生，所以仍在解决语法问题，但我已经设法达到用户退出字段并调用 PHP 页面来更新数据库的程度。

我现在进入最后一部分，根据成功或失败进行更改，让用户知道发生了什么。我正在使用 Twitter Bootstrap 3 框架，因此希望利用一些可用的成功和失败样式，即以下验证状态:

.has-success
.has-error

以下是当用户退出此字段时触发 AJAX 调用的 html 输入:

经理

我不确定如何为 AJAX 调用的成功或失败添加新类，也不知道如果我需要显示错误消息，我也可以将其合并。

这是调用 PHP 页面的 Javascript:

<script type="text/javascript">
function editProject(storeManager,uuid) {
   // Allocate an XMLHttpRequest object
   if (window.XMLHttpRequest) {
      // IE7+, Firefox, Chrome, Opera, Safari
      var xmlhttp=new XMLHttpRequest();
   } else {
      // IE6, IE5
      var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   // Set up the readyState change event handler
   xmlhttp.onreadystatechange = function() {
      if ((this.readyState == 4) && (this.status == 200)) {
         document.getElementById("storeManager").innerHTML=xmlhttp.responseText;
      }
   }
   // Open an asynchronous POST connection and send request
   xmlhttp.open("POST", "editProject.php", true);
   xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xmlhttp.send("storeManager="+storeManager+"&id="+uuid);

}
</script>

我认为这是我需要修改成功选项的行:

document.getElementById("storeManager").innerHTML=xmlhttp.responseText;

但不确定语法是什么，以及如何设置失败选项(例如，如果数据库更新返回错误)。

Answer 1

既然您使用的是需要 jQuery 的 Bootstrap，为什么不让自己的生活变得更轻松一点并使用 jQuery 来执行您的 Ajax 请求，而不是(我会考虑)旧的方式呢？

例如:

HTML

<form>
    <!-- all of your form stuff -->
    <input id="storeManager" type="text">
    ...
</form>

脚本

<script>
$.ajax({
    url: "editProject.php",
    data: storeManager: storeManager, uuid: uuid,
    success: function(data) {
        $("#storeManager").html(data).addClass("has-success");
    },
    error: function (data) {
        $("#storeManager").html(data).addClass("has-error");
    }
});
</script>

我还没有测试过这个，但是如果你have a look at some online examples您应该能够很快掌握此语法，特别是如果您能够计算出上面已有的内容。