Question

我有一个简单的AJAX脚本，当选择菜单选项时，会在PHP页面中查询数据库中的某些值，并将其插入到表单中的元素中。我已经被要求将其转换为jQuery语法，以使其与网站的其余部分保持一致，但对jQuery来说是新手，我会陷入困境。

此处是表单元素：

＆＃13;

<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>

＆＃13;

这是AJAX脚本：

＆＃13;

< 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>

＆＃13;

Answer 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;
            }
        }
    });
}

Answer 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);
    });
});

将AJAX脚本转换为jQuery语法

2 个答案: