ajax - 如何为这个简单的 ajax 提供 1 个以上的输出？

Question

这是我从 w3schools 学到的用于加载 AJAX 的脚本。

document.getElementById("sendInvoiceButton").innerHTML = '';
  var xmlhttp;
  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)
      {
        document.getElementById("invoiceIDStatus").innerHTML = '';
        document.getElementById("invoiceIDStatus").innerHTML=xmlhttp.responseText;
      }
    }

  var invoiceID = document.getElementById("cred_form_4684_1_wpcf-ticket-invoice-id").value;
  var text = "invoiceID=" + encodeURIComponent(invoiceID);
  document.getElementById("invoiceIDStatus").innerHTML = '<img src="http://www.lessons.com.sg/freshbooks/demo_wait.gif" />';
  xmlhttp.open("POST","/freshbooks/getInvoice.php",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send(text);
}

我只能输出 1 xmlhttp.responseText；

我也想将发票号码发送到文本框。我怎样才能做到这一点？

Answer 1

简单的方法

if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    ...
    document.getElementById("yourTextboxId").innerHTML=xmlhttp.responseText;
}

或者如果使用文本框，您的意思是文本字段

if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    ...
    document.getElementById("yourTextfieldId").value=xmlhttp.responseText;
}

---

我建议使用jquery，更简单且跨浏览器兼容

使用 jquery 这将是

$.ajax({
    url:'/freshbooks/getInvoice.php',
    method:'POST',
    data: {invoiceID: $('#cred_form_4684_1_wpcf-ticket-invoice-id').val()},
    success: function(data) { 
       $('#invoiceIDStatus').html(data);
       $('#yourTextfieldId').val(data);
    }
});

Answer 2

我不确定您收到的数据结构，但您可以将其发送为 html 格式，然后将find()其拆分并放入不同的输入字段。