使用Ajax自动填写表单

最新推荐文章于 2023-07-28 15:15:13 发布

furthersun

最新推荐文章于 2023-07-28 15:15:13 发布

阅读量1.1k

点赞数

分类专栏： Ajax 文章标签： ajax import string xmlhttprequest function null

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

當使用者在您的網頁上填寫資料時，如果您的網站資料庫中已經有該使用者的資料，那麼您可以貼心的在他填寫完部份欄位後，根據這些欄位，自動幫他顯示其它相關的資料，以避免他仍要填寫重複的資料。

舉個例子來說，有個員工管理的網頁：

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" οnchange="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;
        }
    }
}

furthersun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Ajax自动填写表单

當使用者在您的網頁上填寫資料時，如果您的網站資料庫中已經有該使用者的資料，那麼您可以貼心的在他填寫完部份欄位後，根據這些欄位，自動幫他顯示其它相關的資料，以避免他仍要填寫重複的資料。舉個例子來說，有個員工管理的網頁： AutoFilledEx-1.html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
复制链接

扫一扫