自動表單填寫

<script>function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</script>
當使用者在您的網頁上填寫資料時,如果您的網站資料庫中已經有該使用者的資料,那麼您可以貼心的在他填寫完部份欄位後,根據這些欄位,自動幫他顯示其它相關的資料,以避免他仍要填寫重複的資料。

舉個例子來說,有個員工管理的網頁:

  • AutoFilledEx-1.html
<!DOCTYPE html 
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>自動表單填寫</title>
<script type="text/javascript" src="AutoFilledEx-1.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td>編號:</td>
<td><input id="id" type="text" onchange="readEmployee();"></td>
</tr>
<tr>
<td>名稱:</td>
<td><input id="name" type="text"></td>
</tr>
<tr>
<td>薪水:</td>
<td><input id="salary" type="text"></td>
</tr>
<tr>
<td>住址:</td>
<td><input id="address" type="text"></td>
</tr>
</tbody>
</table>
</body>
</html>

當輸入人員填完員工編號,如果資料庫中有該編號的員工資料,那您可以使用非同步請求取得名稱、薪水與住址資訊,並直接顯示在網頁上,這樣輸入人員就不用重複輸入這些資料,來看看AutoFilledEx-1.js的內容:
  • AutoFilledEx-1.js
var xmlHttp;

function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

function readEmployee() {
var id = document.getElementById("id").value;

// 如果沒有輸入id就清除欄位
if(id === "") {
clearEmployee();
return;
}

var url = "EmployeeServlet?id=" + id;

createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", url);
xmlHttp.send(null);
}

function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
updateEmployee();
}
}
}

function updateEmployee() {
var xml = xmlHttp.responseXML;
document.getElementById("name").value =
xml.getElementsByTagName("name")[0].firstChild.data;
document.getElementById("salary").value =
xml.getElementsByTagName("salary")[0].firstChild.data;
document.getElementById("address").value =
xml.getElementsByTagName("address")[0].firstChild.data;

}

function clearEmployee() {
document.getElementById("name").value = "";
document.getElementById("salary").value = "";
document.getElementById("address").value = "";
}

當這個JavaScript使用id以非同步方式方式查詢伺服端時,伺服端必須使用以下的XML格式來回應:
<employee>
<id>001</id>
<name>Justin</name>
<salary>30000</salary>
<address>NTU-M8-419</address>
</employee>

例如您可以使用以下這個簡單的Servlet來搭配這個客戶端網頁:

  • EmployeeServlet.java
package onlyfun.caterpillar;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class EmployeeServlet
extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
private Map<String, Employee> inMemoryDB;

public void init() throws ServletException {
inMemoryDB = new HashMap<String, Employee>();

Employee e1 = new Employee("001", "Justin", 30000, "NTU-M8-419");
Employee e2 = new Employee("002", "momor", 30000, "NTU-G8-302");

inMemoryDB.put(e1.id, e1);
inMemoryDB.put(e2.id, e2);
}

private Employee findEmployee(String id) {
Employee employee = inMemoryDB.get(id);

if(employee == null) {
employee = new Employee(id, null, 0, null);
}

return employee;
}

protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
Employee employee = findEmployee(request.getParameter("id"));

response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");

PrintWriter out = response.getWriter();
out.println("<employee>");
out.println("<id>" + employee.id + "</id>");
out.println("<name>" + employee.name + "</name>");
out.println("<salary>" + employee.salary + "</salary>");
out.println("<address>" + employee.address + "</address>");
out.println("</employee>");
out.close();
}

private class Employee {
String id;
String name;
int salary;
String address;

Employee(String id, String name, int salary, String address) {
this.id = id;
this.name = name;
this.salary = salary;
this.address = address;
}
}
}
<script type="text/javascript"><!-- google_ad_client = "pub-9750319131714390"; google_ad_width = 160; google_ad_height = 600; google_ad_format = "160x600_as"; google_ad_type = "text_image"; google_ad_channel = ""; //--> </script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script><iframe width="160" scrolling="no" height="600" frameborder="0" allowtransparency="true" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-9750319131714390&amp;dt=1177384948703&amp;lmt=1177047017&amp;format=160x600_as&amp;output=html&amp;url=http%3A%2F%2Fcaterpillar.onlyfun.net%2FGossip%2FAjaxGossip%2FAutoFilled.html&amp;ad_type=text_image&amp;ref=http%3A%2F%2Fcaterpillar.onlyfun.net%2FGossip%2FAjaxGossip%2FAjaxGossip.html&amp;cc=18&amp;u_h=768&amp;u_w=1024&amp;u_ah=734&amp;u_aw=1024&amp;u_cd=16&amp;u_tz=480&amp;u_his=9&amp;u_java=true&amp;u_nplug=17&amp;u_nmime=57" name="google_ads_frame"></iframe>

<script type="text/javascript"><!-- google_ad_client = "pub-9750319131714390"; google_ad_width = 160; google_ad_height = 600; google_ad_format = "160x600_as"; google_ad_type = "text_image"; google_ad_channel = ""; //--> </script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script><iframe width="160" scrolling="no" height="600" frameborder="0" allowtransparency="true" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-9750319131714390&amp;dt=1177384948734&amp;lmt=1177047017&amp;prev_fmts=160x600_as&amp;format=160x600_as&amp;output=html&amp;url=http%3A%2F%2Fcaterpillar.onlyfun.net%2FGossip%2FAjaxGossip%2FAutoFilled.html&amp;ad_type=text_image&amp;ref=http%3A%2F%2Fcaterpillar.onlyfun.net%2FGossip%2FAjaxGossip%2FAjaxGossip.html&amp;cc=18&amp;u_h=768&amp;u_w=1024&amp;u_ah=734&amp;u_aw=1024&amp;u_cd=16&amp;u_tz=480&amp;u_his=9&amp;u_java=true&amp;u_nplug=17&amp;u_nmime=57" name="google_ads_frame"></iframe>

你可能感兴趣的:(JavaScript,html,xml,servlet,Google)