0

每当我使用 jQuery Ajax 提交下面的表单时，我想创建一个自动刷新表。

这是我的表格

<form id="submitDataToElection">
  <table border="0">
  <tr>
    <td><label for="electionName">Election Name:</label></td>
    <td><input type="text" name="electionName" id="electionName" spellcheck="true" required></td>
  </tr>
  <tr>
    <td><label for="electionDate">Election Date:</label></td>
    <td><input type="text" name="electionDate" id="electionDate" required></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="Reset" type="reset" value="Reset" id="resetInAddElection"><input type="submit" value="Submit" id="submitInAddElection"></td>
  </tr>
  </table>
</form>

表单的 jQuery

$("#submitDataToElection").submit(function(event) {
    $("#resetInAddElection, #submitInAddElection").attr("disabled",true);
    event.preventDefault();
    var values = $(this).serialize();
    $.ajax({
      url: "storeDataToElection.php",
      type: "post",
      data: values,
      success: function(data){
          $('#addElection').dialog('close');              alert(data);
          $("#resetInAddElection, #submitInAddElection").attr("disabled",false);
          $("#electionName,#electionDate").val("");
          $("#electionName").focus();
      },
      error:function(data){
          $("#resetInAddElection, #submitInAddElection").attr("disabled",false);
          alert("failure");
      }   
    }); 
});

这是 storeDataToElection.php 的代码

mysql_connect("localhost", "root", "");
mysql_select_db("automated_election");
$name = $_POST['electionName'];
$date = $_POST['electionDate'];

mysql_query("UPDATE election SET is_active = 'no' WHERE is_active = 'yes'")or die(mysql_error());
$insert = mysql_query("INSERT INTO election
    (election_name ,
    election_date ,
    is_active)
    VALUES('$name', '$date', 'yes')");
if(!$insert) die(mysql_error());
else die("Success");

这是我要自动刷新的表

$result = mysql_query("SELECT * FROM election WHERE is_active = 'yes'");
echo '<hr><table style="font-size:14px;" id="viewElectionTable">';
while ($data = mysql_fetch_assoc($result)) {
    $date = explode("-",$data['election_date']);
    switch($date[1]){
        case 1:
            $month = "January";
            break;
        case 2:
            $month = "February";
            break;
        case 3:
            $month = "March";
            break;
        case 4:
            $month = "April";
            break;
        case 5:
            $month = "May";
            break;
        case 6:
            $month = "June";
            break;
        case 7:
            $month = "July";
            break;
        case 8:
            $month = "August";
            break;
        case 9:
            $month = "September";
            break;
        case 10:
            $month = "October";
            break;
        case 11:
            $month = "November";
            break;
        case 12:
            $month = "December";
            break;
    }
    echo '<tr>';
    echo "<td>Election Name: &nbsp;&nbsp;</td><td>".$data['election_name'].'</td>';
    echo '</tr><tr>';   
    echo "<td>Election Date: &nbsp;</td><td>".$month." ".$date[2].", ".$date[0].'</td>';
    echo '</tr>'; 
}
echo '</table><hr>';
4

1 回答 1

1

一般的想法是使用您的 ajax 命中的文件来输出新的表格 HTML。然后使用返回给您的 ajax 调用的 HTML 输出来替换页面上的现有表格。

例如：

将要刷新的表放在一个 div 中，并为该 div 提供一个 id 以供参考。在下面的示例中，我正在使用

<div id="tableHolder"><!-- TABLE GOES HERE --></div>

在 storeDataToElection.php 中，写入数据库后，输出新表格 HTML。此 HTML 输出将返回到您的 ajax 调用的“成功”函数。

然后，您可以通过执行以下操作将表格替换为新内容：

success : function(updatedTable) {
  ...
  $('div#tableHolder').html(updatedTable);
  ...
}
于 2013-01-15T19:51:00.977 回答