提交和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()事件。

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

例如：

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