当我把 <button> 按钮放到了 <for

标签（空格分隔）： html ajax servlet form

---

1.问题描述

---

这是一个填写用户名和消息后，点击 encryptMessage 按钮后可以获得加密后的消息的表单，当我想通过 ajax 获取到 servlet 处理后的结果时,我的 message.jsp 页面部分代码如下：

    <form action="AddEncrptMessage" method="post">
        input message:
        <input type="text" name="message" id="message">
        <br> send to this guy (his username) :
        <input type="text" name="username" id="username">
        <br>
        <button onClick="encrypt();" id="btn">encryptMessage</button>
        <br> encryptedMessage:
        <div id="show"></div>
        <textarea rows="5" cols="30" name="encryptMes"
            id="showEncrytedMessage"></textarea>
        <br>
        <input type="submit" name="submit" value="submit">
        <br>
    </form>

我的 javascript 代码 ：

function createHttpRequest(method, url, callback) {
    httpRequest = false;
    if (window.XMLHttpRequest) {
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try {
            httpRequest = new ActiveXObject("Msxm12.XMLHTTP");
        } catch (e) {
            try {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
            }
        }

    }

    if (!httpRequest) {
        alert("can not create XMLHttpRequest object .");
        return false;
    }

    httpRequest.onreadystatechange = callback;
    httpRequest.open(method, url, true);
    httpRequest.send(null);

}

function encrypt() {
    var username = document.getElementById("username").value;
    var message = document.getElementById("message").value;
    var url = "EncryptMessageServlet?message=" + encodeURI(encodeURI(message))
            + "&username=" + encodeURI(encodeURI(username));
    createHttpRequest("GET",url, getEncrypt);
}

function getEncrypt() {
    if (httpRequest.readyState == 4) {
        if (httpRequest.status == 200) {
            document.getElementById("showEncrytedMessage").innerHTML = httpRequest.responseText;
        } else {
            alert("ERROR");
        }
    }
}

按理说我当我输入username=1111,password=hello,点击encryptMessage按钮后textarea里应出现加密后的消息,可是当我点了按钮后 url 一直显示：

localhost:8080/homework/message.jsp?username=1111&message=hello

但是当我在地址栏输入：

localhost:8080/homework/AddEncrptMessage?username=1111&message=hello

即直接请求 Servlet 时,页面输出了加密后的消息。

2.<button> 按钮捣的鬼

---

当在form表单里使用

    <input type="button" value="encryptMessage" id="btn"
            onClick="encrypt();" />

代替：

<button onClick="encrypt();" id="btn">encryptMessage</button>

一切正常了。

3.原因所在

---

W3School 上有说：

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

<button> 的 type 属性：

• button
• reset
• submit

还有：

重要事项：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。