JavaScript：关于如何使用 onblur 从另一台服务器获取信息并自动填充其他文本框条目的提示？答案

【问题标题】：JavaScript: Tips on how to use onblur to get info from another server and auto populate other textbox entries?JavaScript：关于如何使用 onblur 从另一台服务器获取信息并自动填充其他文本框条目的提示？
【发布时间】：2015-11-05 18:52:35
【问题描述】：

我正在尝试主要使用 HTML、CSS 和 JavaScript 制作网页（我对制作网站还很陌生，所以只有这三个我相当不错）。此网页将是一个与企业软件 (BMC Remedy ITSM) 交互的表单，该软件将强制验证并在提交时使我们的所有工单准确无误。

网页上为数不多的静态文本框之一是 ID 号字段、全名字段和电话号码字段。

我的目标是让用户输入他们的 ID 号码，并让这个 ID 号码与企业软件通信，查找 ID 号码，并根据给定的 ID 号码自动填充全名和电话号码。

我希望这是 ID 号文本框上的 lostfocus 事件，因此我猜它会在 JavaScript 的 onblur 下。

有人可以插话并给我一些关于如何实现这一目标的指示吗？

谢谢！

【问题讨论】：

对方服务器返回的数据如何？ json?
它正在通过 XML 返回。

标签： javascript jquery html

【解决方案1】：

下面是纯 JavaScript 中使用 blur 事件的简单示例。顶部示例显示 JSON 返回，底部示例显示 XML。

小提琴：http://jsfiddle.net/9dpxmpru/2/

HTML：

<input id="empid" type="text" placeholder="Employee ID" />
<input id="name" type="text" placeholder="Full Name" />
<input id="phone" type="text" placeholder="Phone" />

JS：

var empid = document.getElementById('empid');
empid.addEventListener('blur',
    function (event) {
        var idVal = this.value;
        // make some ajax call
        // perhaps it returns this
        var response = {
            name: "John Doe",
            phone: "555-5555"
        };
        var name = document.getElementById('name');
        var phone = document.getElementById('phone');
        name.value = response.name;
        phone.value = response.phone;
    }, true
);

至于 ajax 调用，你可以这样做：

// Make Ajax Call
var requestObject = new XMLHttpRequest();
requestObject.open('POST', 'someurl', true);
requestObject.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
// XML: requestObject.setRequestHeader('Content-Type', 'text/xml');
requestObject.onload = function () {
    if (this.status >= 200 && this.status < 400) {
        // Success!
    }
    else {
        // Handle some server error
    }
};
requestObject.onerror = function () {
    // Handle some server error
};
requestObject.send(JSON.stringify('idValueFromField'));

这当然很粗略，但大体思路。

这里是小提琴解析xml：http://jsfiddle.net/9dpxmpru/4/

var empid = document.getElementById('empid');
empid.addEventListener('blur',
    function (event) {
        var idVal = this.value;
        // make some ajax call
        // perhaps it returns this
        var response = "<response><name>John Doe</name><phone>555-5555</phone></response>";
        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(response, 'text/xml');
        var name = document.getElementById('name');
        var phone = document.getElementById('phone');
        name.value = xmlDoc.getElementsByTagName('name')[0].childNodes[0].nodeValue;
        phone.value = xmlDoc.getElementsByTagName('phone')[0].childNodes[0].nodeValue;
    }, true
);

jQuery 示例：

$("#empid").on("focusout",
    function (event) {
        var idVal = $(this).val();
        // make some ajax call
        // perhaps it returns this
        var response = {
            name: "John Doe",
            phone: "555-5555"
        };
        $("#name").val(response.name);
        $("#phone").val(response.phone);
    }
);

jQuery Ajax：

$.ajax({
    method: "POST",
    url: "someurl",
    dataType: 'json',
    // XML: dataType: 'xml',
    data: {
        empid: idVal
    }
}).done(
    function (msg) {
        // success!
    }
);

jQuery XML 示例：

$("#empid").on("focusout",
    function (event) {
        var idVal = $(this).val();
        // make some ajax call
        // perhaps it returns this
        var response = "<response><name>John Doe</name><phone>555-5555</phone></response>";
        var xmlDoc = $.parseXML(response),
        var xml = $(xmlDoc),
        $("#name").val(xml.find("name").text());
        $("#phone").val(xml.find("phone").text());
    }
);

【讨论】：

【解决方案2】：

就您的想法而言，您走在正确的轨道上。但既然你说你是 web 开发的新手，我会解释更多。您将有一个文本输入来监听模糊。然后，模糊事件将向您的 ITSM 软件发送一个 XMLHttpRequest，提供一个响应处理程序，该处理程序将在请求完成后立即执行。

如果您还没有研究过它，并且如果您有选择的话，我建议您使用 jQuery，因为它为 HTML 提供了遍历功能，而且 [大部分] 适用于 XML。它还会让您的通话更轻松。

HTML：

<input id="employeeId" type="text" placeholder="Employee ID">
<input id="fullName" type="text">
<input id="phone" type="text">

假设你的 XML 是这样的：

<lotsOfResponseParentNodes>
      <person>
          <fullName>John Doe</fullName>
          <phoneNumber>5555551212</phoneNumber>
      </person>
</lotsOfResponseParentNodes>

JavaScript（位于正文底部）：

function setFieldVals(fullName, phoneNumber) {
  $("#phone").val(phoneNumber);
  $("#fullName").val(fullName);
}

$("#employeeId").blur(function(e) {
  $.ajax({
    type: "POST",    //or GET, depending on your api spec
    url: ENDPOINT_URI,  //Again, depending on your software
    data: {employeeId: $(e.target).val()}
    dataType: "xml",
    success: function(xml) {
      setFieldVals($(xml).find("fullName").text(), $(xml).find("phoneNumber").text());
    },
    error: function() {
      alert("An error happened.");
    }
  });
});

这里的关键是您如何解析 XML。在我上面的 XML 示例中， find("nodeName") 有效。但是，如果 XML 是 <person phone="xxx">，那么您必须改为 $(xml).find('person').attr('phone')。

【讨论】：