如何使用ajax和jquery顯示html表格？

我一直試圖讓我的html表格出現，當我點擊提交按鈕，但它所做的是插入數據到數據庫和HTML表格不出現。如何使用ajax和jquery顯示html表格？

，這裏是我的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $("button").click(function(){ 
     $("#div1").load("table.php"); 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <form action = "insert.php" method="post"> 
     Firstname: <input type="text" name="firstname"></br> 
     Lastname: <input type="text" name="lastname"></br> 
     Middlename: <input type="text" name="middlename"></br> 
     <button type="submit">submit</button> 
    </form> 
    <div id="div1"> 
    </div>  
    </body> 
</html>

這裏是我的table.php

<?php 

$con = mysqli_connect("localhost","root","","study"); 

if (mysqli_connect_errno($con)) 
{ 
    echo "Failed to connect to mysql" . mysqli_connect_error(); 
} 

echo '<table border = 1>'; 
echo '<tr>'; 
echo ' <th>FIRSTNAME</th>'; 
echo '<th>LASTNAME</th>'; 
echo ' <th>MIDDLENAME</th>'; 
echo ' <th>DELETE</th>'; 
echo ' </tr>'; 
$result = mysqli_query($con,"SELECT * FROM sample_employers"); 
while($row=mysqli_fetch_array($result)) 
{ 
    echo "<tr>"; 
    echo "<td>" . $row['firstname'] . "</td>"; 
    echo "<td>" . $row['lastname'] . "</td>"; 
    echo "<td>" . $row['middlename'] . "</td>"; 
    echo "<td> <input type='button' value='Delete' </td>"; 
    echo "</tr>"; 
} 
mysqli_close($con); 
echo '</table>'; 
?>

我做了一些編輯在我的index.php。我把提交按鈕放在窗體標籤之外，並且出現了html表格，但現在的問題是沒有數據插入到數據庫中。所以我如何讓html表格出現並同時向數據庫插入數據我點擊提交按鈕。

來源

2013-07-10 jmjassy27

如果你自己運行table.php它會返回什麼？ – Nick

@尼克是的..當我運行table.php時出現表格 – jmjassy27

爲什麼你移動表單並提交按鈕？ – Paul

// example 1 GET 
$(document).ready(function(){ 
    $("#submitButt").click(function(e){ // u should give a id to the button. 
    e.preventDefault(); // this is to prevent the form submit by it self 

    // using ajax to submit 
    $("#div1").load("insert.php", 
     $(this.form).serialize(); // this will use GET to submit data 
    ); 
    }); 
}); 

// example 2 POST 
$(document).ready(function(){ 
    $("#submitButt").click(function(e){ // u should give a id to the button. 
    e.preventDefault(); // this is to prevent the form submit by it self 

    // using ajax to submit 
    $("#div1").load("insert.php", 
     $(this.form).serializeArray(); // this will use POST to submit data 
    ); 
    }); 
}); 


http://jsfiddle.net/9kcek/

使用防篡改數據來檢查請求，當你點擊提交按鈕。

來源

2013-07-10 02:01:41

如果您按提交，那麼您將被重定向到insert.php。因此，您的點擊事件將永遠不會執行。您必須先阻止重定向，才能加載數據。

此外，您需要切換髮布數據的方式。當你想直接在當前頁面上插入表格時，你應該切換到ajax方法。您的數據將通過$.ajax在後臺發送到您的insert.php，然後您可以在table.php的內容上成功加載您的。

<script> 
    $(document).ready(function() { 
     var $form = $('form'); 
     $form.submit(function (event) { 
      event.preventDefault(); 

      var formData = $form.serialize(), 
       url = $form.attr('action'); 

      $.ajax({ 
       type: "POST", 
       url: url, 
       data: formData, 
       success: function() { 
        $("#div1").load("table.php"); 
       } 
      }); 
     }); 
    }); 
</script>

來源

2013-07-10 02:32:46 k0pernikus

謝謝..但這個代碼是什麼意思？（）， var formData = – jmjassy27

@ jmjassy27'$ form.serialize（）'將表單數據轉換爲一個url編碼的字符串，然後您可以發佈。 '$ form.attr（'action'）'讀取表單標籤的屬性'action'，在你的情況下是'insert.php'。這是數據發佈的網址。不要被逗號分隔混淆。有關進一步參考，請參閱[serialize]（http://api.jquery.com/serialize/）和[attr]（http://api.jquery.com/attr/）。 – k0pernikus

@ jmjassy27我的代碼非常類似[post]（http://api.jquery.com/jQuery.post/）上的示例。 – k0pernikus

如何使用ajax和jquery顯示html表格？

回答

相關問題