無需離開頁面發送html表格數據和表格數據

但是，當我嘗試將其中一個或另一個集成到一起時，我必須編寫這兩個函數。（要麼發送電子郵件的名稱/電子郵件&土地上server.php，或電子郵件與數據發送&沒有任何輸入發送）。我希望能夠發送html表格數據以及用戶名&電子郵件輸入。下面的代碼將簡單地回顯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

發送數據210

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頁面。希望我已經清楚了。乾杯。

來源

2014-03-31 Minum

只需在#sendServer的點擊處理程序中添加e.preventDefault();即可。這將阻止表單像傳統上那樣提交。

您還需要將參數e添加到功能：

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

在同一個地方

或者return false;正如下面的評論。

來源

2014-03-31 21:11:48 Jeff

或'return false;' – OptimusCrime

我在發送電子郵件和名稱以及html數據時仍然遇到問題。 – Minum

無需離開頁面發送html表格數據和表格數據

回答

相關問題