不离开页面发送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; 在下面评论的同一位置。