提交和AJAX

Question

我有一个使用POST方法与AJAX的注册表单，我需要提交按钮的类型为“提交”，因为PHP功能似乎只能使用类型集来提交，但我想ajax发送数据并立即返回结果，而无需更改页面。

HTML

<form name = "reg" action = "insert.php" method = "POST"> 
    <table> 
     <tr> 
      <td class="ule">First Name</td> 
      <td><input type = "text" name="firstnames" id="firstnames"></input></td> 
     </tr> 
     <tr> 
      <td class="ule">Last Name</td> 
      <td><input type = "text" name="lastnames" id="lastnames"></input></td> 
     </tr> 
     <tr> 
      <td class="ule">Email</td> 
      <td><input type = "text" name="emails" id="emails"></input></td> 
     </tr> 
     <tr>    
      <td class="ule">User Name</td> 
      <td><input type = "text" name = "usernames" id="usernames"></input></td> 
     </tr> 
     <tr> 
      <td class="ule">Password</td> 
      <td><input type = "password" name = "passwords" id="passwords"></input></td> 
     </tr> 
    </table> 
    <div class="regButton"> 
     <button onclick = "register()" type = "button" >Register</button> 
    </div> 
</form> 

PHP

<?php 
session_start(); 

$db = sqlite_open('my_database.db', 0666, $error); 

$fname = $_POST["firstnames"]; //potential problem area 
$lname = $_POST["lastnames"]; 
$email = $_POST["emails"]; 
$user = $_POST["usernames"]; 
$pass = $_POST["passwords"]; 

$query = "INSERT INTO User (firstName, lastName, Email, Username, Password) VALUES ('.$fname','.$lname','.$email','.$user','.$pass')"; 

insertRows($db, $fname, $lname, $email, $user, $pass, $query); 

function insertRows($dbs, $names, $lnames, $emails, $usernames, $passwords, $querys) 
{ 
    if($names != NULL && $lnames != NULL && $emails != NULL && $usernames != NULL && $passwords != NULL) 
    { 
     echo "Thank you for registering";  
     $result = sqlite_query($dbs, $querys); 
    } 
    else 
    { 
     echo "<h1 style=color:red;>Fill out required fields</h1>"; 
    } 
} 

?> 

的JavaScript

function register(){ 
    var xmlHTTPreq1; 
    var name = encodeURIComponent(document.getElementById('firstnames').value); 
    var lastname = encodeURIComponent(document.getElementById('lastnames').value); 
    var myemail = encodeURIComponent(document.getElementById('emails').value); 
    var users = encodeURIComponent(document.getElementById('usernames').value); 
    var passwords = encodeURIComponent(document.getElementById('passwords').value); 
    var params = "fname="+name+"&lname="+lastname+"&email="+myemail+"&user="+users+"&pass="+passwords; 

    if (window.XMLHttpRequest) { 
     try { 
      xmlHTTPreq1 = new XMLHttpRequest(); 
     } catch(e) { 
      xmlHTTPreq1 = false; 
     } 
    } else { 
     try{ 
      xmlHTTPreq1 = new ActiveXObject("Microsoft.XMLHTTP"); 
     }catch(e){ 
      xmlHTTPreq1 = false; 
     } 
    } 

    xmlHTTPreq1.onreadystatechange = function() 
    { 
     if(xmlHTTPreq1.readyState == 4 && xmlHTTPreq1.status == 200){ 
      document.getElementById('myDiv').innerHTML = xmlHTTPreq1.responseText; 
     } 
    } 
    xmlHTTPreq1.open("POST", "insert.php?", true); 
    xmlHTTPreq1.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    xmlHTTPreq1.send(params); 
} 

Answer 1

不，你不这样做，你可以拥有任何类型的按钮或链接或任何居然和在您的AJAX调用中添加一个onclick()事件。

请注意，如果在您返回false的表单的onsubmit()事件中提交按钮实际上不会提交表单（并因此重新加载页面）。

如：

<form method='post' onsubmit='doAjax();return false;'> 
<input.../> 
<input.../> 
<input type='submit'... /> 
</form>