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

Question

我正在尝试主要使用HTML、CSS和JavaScript来制作网页(我对制作网站相当陌生，所以这是我仅有的三个相当不错的工具)。这个网页将是一个与企业软件(BMC Remedy ITSM)接口的表单，该软件将强制执行验证，并在提交时使我们所有的票证精确。

网页上的几个静态文本框中的一个将是身份证号码字段、全名字段和电话号码字段。

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

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

有没有人能插一句，给我一些建议，告诉我如何实现这个目标？

谢谢!

Answer 1

下面是在纯JavaScript中使用模糊事件的快速示例。上面的例子显示了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());
    }
);

Answer 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')。