将 AJAX 脚本转换为 jQuery 语法 [关闭]答案

【问题标题】：Convert AJAX script to jQuery syntax [closed]将 AJAX 脚本转换为 jQuery 语法 [关闭]
【发布时间】：2016-02-17 02:49:00
【问题描述】：

我有一个简单的ajax脚本，当制作一个选择菜单选项时，查询来自数据库的某些值的PHP页面，并将其插入表单中的元素。我被要求将其转换为 jQuery 语法，以使其与网站的其他部分保持一致，但对于 jQuery，我遇到了困难。

现在是表单元素：

<div class="input-group col-xs-8">
  <select class="form-control" name="templateRef" id="templateRef" onchange="getTemplate(this.value)">
    <option value=""></option>
    <option value="123">Template A</option>
    <option value="456">Template A</option>
  </select>
</div>

这是 AJAX 脚本：

< script type = "text/javascript" >
  function getTemplate(str) {
    if (str == "") {
      document.getElementById("messageBody").innerHTML = "";
      return;
    }
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var data = JSON.parse(xmlhttp.responseText);
        for (var i = 0; i < data.length; i++) {
          document.getElementById("messageBody").innerHTML = data[i].templateBody;
          document.getElementById("emailSubject").value = data[i].templateSubject;
        }
      }
    }
    xmlhttp.open("POST", "getTemplate?templateID=" + str, true);
    xmlhttp.send();
  } < /script>

【问题讨论】：

你遇到了什么问题？
你知道你覆盖了循环中的innerHTML和value吗？
这不是“AJAX 脚本”，它是使用原生 JavaScript 而不是框架（如 jQuery）执行 AJAX 请求的 JavaScript。我建议阅读 jQuery 文档，它非常好，并且可能有数千个 jQuery 教程和数百万个示例。
你有什么问题？

标签： javascript php jquery html ajax

【解决方案1】：

function getTemplate(str) {
    if (str == "") {
        document.getElementById("messageBody").innerHTML = "";
        return;
    }
    $.ajax({
        dataType: "json",
        url: "getTemplate?templateID=" + str,
        method: "POST",
        success: function(data) {
            for (var i = 0; i < data.length; i++) {
                document.getElementById("messageBody").innerHTML = data[i].templateBody;
                document.getElementById("emailSubject").value = data[i].templateSubject;
            }
        }
    });
}

【讨论】：

【解决方案2】：

如果你希望所有的代码都是 jQuery 风格的：

$.ajax({
    method: 'POST', 
    url: 'getTemplate?templateID=' + str,
    dataType: 'json'
}).done(function(data) {
    $(data).each(function() {
        $("#messageBody").html(this.templateBody);
        $("#emailSubject").val(this.templateSubject);
    });
});

【讨论】：