发送html表格数据&表格数据而不离开页面

时间:2014-03-31 21:06:34

标签: javascript php jquery html

我必须编写代码来执行这两个功能,但是,当我尝试将它们集成到一个或另一个时。 (电子邮件与名称/电子邮件一起发送&登陆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";

我确信我只是错过了一些小事。当我将这些实现到我的代码中时,会发送一封电子邮件。该电子邮件包含姓名&amp;电子邮件或html表数据。代码的不同之处在于在我的代码上添加了一个按钮动作=“提交”。每当发送的电子邮件显示名称&amp;电子邮件,该页面也重定向到空白的PHP页面。希望我足够清楚。 欢呼声。

1 个答案:

答案 0 :(得分:1)

只需在e.preventDefault();点击处理程序中的提交javascript中添加#sendServer即可。这样可以防止表单传统上像现在一样提交。

您还需要将参数e添加到该函数:

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

return false;与下面评论的地点相同。