使用ajax發布表單數據？

Question

我有以下形式：

<form name="register" id="register" action="include/process_registration.php" method="post"> 
<div class="form_error">Ooops! There is some missing or incorrect information. Please look back over this section. </div>    

<div class="left_form2" >
<div class="inner_form1">
<p>Your First Name:*</p>
<p>Your Last Name:*</p>
<p>Date of Birth:*</p>
</div>
<div class="inner_form2">
<input type="text" name="firstname" id="firstname" class="login_form2" autocomplete="off"><br/>
<input type="text" name="lastname" id="lastname" class="login_form2" autocomplete="off"><br/>  
<input type="text" name="dob" id="dob" class="login_form2"><br/>
</div>    
</div>


<div class="left_form2" style="text-align:right;">
<div class="inner_form1">
<p>Email Address:*</p>
<p>Confirm Email:*</p>
</div>
<div class="inner_form2">
<input type="text" name="email" id="email" class="login_form2" autocomplete="off"><br/>
<input type="text" name="email2" id="email2" class="login_form2" autocomplete="off"><br/>  
</div>
</div>



<input type="submit" id="register1" name="register" value="Register" class="buttons_register"> 
</form>   

然后，我使用ajax將表單數據發布到mysql查詢process_registration.php：

阿賈克斯：

  <script type="text/javascript">
            $(function() {
//alert('Document is ready');

                $('#register1').click(function() {
                    var a = $('#firstname').html();
                    var b = $('#lastname').html();
                    var c = $('#dob').html();
                    var d = $('#email').html();
                    var f = $('#email2').html();
//alert('You picked: ' + sel_stud);

                    $.ajax({
                        type: "POST",
                        url: "include/process_registration.php",
                        data: {theOption: a, theOption2: b, theOption3: c, theOption4: d, theOption5: f},
                        success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
                            $('#LaDIV').html(whatigot);
                            $('#theButton').click(function() {
                                alert('You clicked the button');
                            });
                        } //END success fn
                    }); //END $.ajax
                }); //END dropdown change event
            }); //END document.ready
        </script>

我的php文件process_registration包含我的mysql查詢，如下所示：

 <?php 
    session_start();
    include("config.php");
    include("verify.php");
    //retrieve our data from POST

    $firstname = $_POST['theOption'];
    $lastname = $_POST['theOption2'];
    $dob = $_POST['theOption3'];
    $email = $_POST['theOption4'];
    $email2 = $_POST['theOption5'];


    $firstname = stripslashes($firstname);
    $firstname = mysql_real_escape_string($firstname);
    $lastname = stripslashes($lastname);
    $lastname = mysql_real_escape_string($lastname);
    $email = stripslashes($email);
    $email = mysql_real_escape_string($email);
    $email2 = stripslashes($email2);
    $email2 = mysql_real_escape_string($email2);
    $dob = stripslashes($dob);
    $dob = mysql_real_escape_string($dob);

    include '../dependables/secure.php';  

    $sql = "INSERT INTO supplier_registration (id, first_name, last_name, supplier_email, supplier_password, salt, dob, date) VALUES ('', '$firstname','$lastname','$email2', '$hash', '$salt', '$dob', now())";
    $result2 = mysql_query($sql);


    ?>

由於某種原因，我被帶到表單提交的process_registation.php頁面，並且獲得了我所有表單值的未定義索引錯誤。 有人可以告訴我我要去哪里了嗎？ 謝謝

Answer 1

您將進入該頁面，因為表單的操作說明了這一點。

您可以在提交表單時使用javascript / jquery防止這種情況，然后執行ajax代碼。

$("#register1").on("click", function(e) {
    e.preventDefault();
    //rest of your code
});

另外，您不會使用.html()獲得輸入值，而應使用.val()

PS：您可以通過窗體的serialize功能獲得更少的代碼。 看一下jQuery API。

Answer 2

從您的表格中刪除...

action="include/process_registration.php"

如果希望它重新加載當前頁面，只需使其為action =“”。

您可能實際上也想從process_registration.php中回顯某些內容，否則，成功函數中的“ whatigot”將始終為空。

Answer 3

您將需要使用e.preventDefault()來停止提交點擊正常工作。

您還需要使用.val()而不是.html()因為您應該獲取輸入的值，而不是輸入中的html。

$('#register1').click(function(e) {
    e.preventDefault();
    var a = $('#firstname').val();
    var b = $('#lastname').val();
    var c = $('#dob').val();
    var d = $('#email').val();
    var f = $('#email2').val();

    // AJAX Call
});