發送HTML表格數據和表單數據而無需離開頁面

Question

我必須編寫代碼來完成這兩個功能，但是，當我嘗試將它們集成在一起時，我必須編寫代碼。 （或者發送帶有名稱/電子郵件的電子郵件並登陸server.php，或者發送帶有數據的電子郵件，並且不發送任何輸入）。 我希望能夠發送html表數據以及用戶名和電子郵件輸入。 下面的代碼將簡單地回顯html數據或用戶輸入。

此代碼將數據發送到服務器：

jQuery / HTML

<script language="javascript" type="text/javascript" src="jQuery.js">
</script>
<script language="javascript" type="text/javascript">
$(function(){
    var dataArr = [];
     $("table").each(function(){
        dataArr.push($(this).html());
    });
     $('#sendServer').click(function(){
     $.ajax({
          type : "POST",
          url : 'server.php',
          data : "content="+dataArr,
          success: function(data) {
              alert(data);// alert the data from the server
          },
          error : function() {
          }
        });
    });
});
</script>

 <table id="table" border=1>
    <thead> <tr>
    <th>First</th>
    <th>Last</th>
    <th>Date of birth</th>
    <th>City</th>
    </tr></thead>
    <tbody>
    <tr>
    <td>TEXT1</td>
    <td>TEXT2</td>
    <td>TEXT3</td>
    <td>TEXT4</td>
    </tr>
    <tr>
    <td>TEXT5</td>
    <td>TEXT6</td>
    <td>TEXT7</td>
    <td>TEXT8</td>
    </tr>
    <tr>
    <td>TEXT9</td>
    <td>TEXT10</td>
    <td>TEXT11</td>
    <td>TEXT12</td>
    </tr>
    </tbody>
    </table>
  <input id="sendServer" name="sendServer" type="button" value="Send to Server" />

Server.php

<?php 
echo $_REQUEST['content'];

?>

這種形式使用ajax發送數據

<div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
<form id="ff" action="test.php" method="post">
<table>
    <tr>
        <td>Name:</td>
        <td><input name="name" type="text"></input></td>
    </tr>
    <tr>
        <td>Email:</td>
        <td><input name="email" type="text"></input></td>
    </tr>
    <tr>
        <td>Phone:</td>
        <td><input name="phone" type="text"></input></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="submit" value="Submit"></input></td>
    </tr>
</table>
</form>

jQuery腳本

$('#ff').form({
success:function(data){
    $.messager.alert('Info', data, 'info');
}
});

和PHP

$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];

echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";

我確定我只是缺少一些小東西。 當我將這些代碼實現到我的代碼中時，將發送一封電子郵件。 電子郵件包含名稱和電子郵件，或html表數據。 代碼的不同之處在於在我的代碼上添加了一個按鈕action =“ submit”。 每當發送的電子郵件顯示名稱和電子郵件時，該頁面還會重定向到空白php頁面。 希望我已經足夠清楚了。 干杯。

Answer 1

只需添加一個e.preventDefault(); 到#sendServer的點擊處理程序中的提交javascript。 這將阻止表單像現在一樣按傳統方式提交。

您還需要將參數e添加到該函數：

$('#sendServer').click(function(e){
    // ajax call
    e.preventDefault();
}

或return false; 與下面評論的位置相同。