按鈕標籤的表單屬性會導致頁面重新加載？

Question

首先，這是我的AJAX代碼：

<script> 
function ajaxInsert() { 
    var xmlhttp = new XMLHttpRequest() 
    xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     document.getElementById("select").innerHTML = xmlhttp.responseText 
    } 
    } 
    var user = document.getElementById("user").value 
    var pwd = document.getElementById("pwd").value 
    var email = document.getElementById("email").value 
    var str = "user=" + user + "&pwd=" + pwd + "&email=" + email 
    // document.write(str) 
    xmlhttp.open("post", "getconnectforxmlhttp.php", true) 
    xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded") 
    xmlhttp.send(str) 
} 

，然後，我的形式：

<form method="post" id="insertform"> 
    <label for="user">用戶名</label><input type="text" id="user" name="user"> 
    <label for="pwd">密碼</label><input type="password" id="pwd" name="pwd"> 
    <label for="email">郵箱</label><input type="email" id="email" name="email"> 
</form> 
<button form="insertform" onclick="ajaxInsert()">提交</button> 
<div id="select"></div> 

和最後，在getconnectforxmlhttp.php文件我的PHP代碼：

<?php 
$pdo = new PDO("mysql:host=localhost; dbname=db_test", "root", ""); 
if (isset($_POST)) { 
    $values = "'".implode("', '", array_values($_POST))."'"; 
} 
$str = ""; 
try { 
    $resp = $pdo->prepare("INSERT INTO user (user, pwd, email) VALUES ($values)"); 
    $resp->execute(); 
} catch (Exception $e) { 
    $str .= "Error".$e->getMessage()."<br>"; 
} 
if ($pdo->lastInsertId()) { 
    try { 
    $res = $pdo->prepare("SELECT * FROM user"); 
    $res->execute(); 
    } catch (Exception $e) { 
    $str .= "Error".$e->getMessage()."<br>"; 
    } 
    $result = $res->fetchAll(PDO::FETCH_ASSOC); 
    for ($i=0; $i < count($result); ++$i) { 
    $str .= $result[$i]["id"]."&nbsp;".$result[$i]["user"]."&nbsp;" 
    .$result[$i]["pwd"]."&nbsp;".$result[$i]["email"]."<br>"; 
    } 
    echo $str; 
} else { 
    $str .= "插入失敗"; 
    echo $str; 
} 

?> 

它所做的是在本地數據庫的表用戶中插入一個新行，然後在div標籤之間顯示它們。但是，當我運行此代碼時，insert語句成功，並且結果div標籤）顯示第二個，是的，它顯示，但奇怪的是，然後它消失了，現在我知道如何做到這一點，只需刪除開始按鈕標籤中的表單屬性，並更改ID的值div標籤成別的東西，如：

<button onclick="ajaxInsert()">提交</button> 
<div id="sel"></div> 

也改變AJAX代碼有點像document.getElementById("sel").innerHTML = xmlhttp.responseText，但有一個小問題：我不知道發生了什麼，什麼是我首先寫形式的問題，這些變化解決了什麼問題？

Answer 1

我相信你問你爲什麼頁面會刷新，當你點擊按鈕，而不是運行你的JavaScript。這可能是因爲該按鈕鏈接到具有其form屬性的表單。這不是提交表單的標準方式。

HTML表單需要提交action和method屬性。如果沒有action屬性，表單將默認提交到同一頁面，即，這將解釋頁面刷新。

儘管您打算使用AJAX提交表單，但如果JavaScript中斷，會發生什麼情況？如果您的用戶沒有啓用JavaScript，會發生什麼情況？在這兩種情況下，您的表單都無法提交。

此外，使用類型爲submit的輸入來提交HTML表單。這意味着你的形式可能看起來像這樣;

<form method="post" action="getconnectforxmlhttp.php" onsubmit="event.preventDefault(); ajaxInsert();" id="insertform"> 
    <label for="user">用戶名</label><input type="text" id="user" name="user"> 
    <label for="pwd">密碼</label><input type="password" id="pwd" name="pwd"> 
    <label for="email">郵箱</label><input type="email" id="email" name="email"> 
    <input type="hidden" name="return" value="html"> 
    <input type="submit" value="提交"> 
</form> 
<div id="select"></div> 

如果這種形式不提交AJAX那麼它將提交的所有數據，以getconnectforxmlhttp.php。輸入<input type="hidden" name="return" value="html">將允許您知道沒有JavaScript，PHP應該返回一個HTML頁面來顯示數據。

否則你的AJAX提交給PHP文件而沒有的隱藏輸入。在這種情況下，你的PHP文件只能返回數據。

對於啓用了JavaScript的用戶，將使用表單屬性onsubmit;

onsubmit="event.preventDefault(); ajaxInsert();" 

這將首先停止正常提交表單，然後調用你的函數使用AJAX提交表單。

對JavaScript的這種說法被稱爲漸進式增強，它可以讓您的系統爲每個人工作工作，但在可行的情況下可以更好地工作。這是有利的，而不是使它不工作爲大家，但有些人更好地工作