0

当我单击提交按钮时，我一直试图让我的 html 表出现，但它所做的只是将数据插入数据库并且 html 表没有出现。

这是我的 index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#div1").load("table.php");
      });
    });
    </script>
  </head>
  <body>
    <form action = "insert.php" method="post">
      Firstname: <input type="text" name="firstname"></br>
      Lastname: <input type="text" name="lastname"></br>
      Middlename: <input type="text" name="middlename"></br>
      <button type="submit">submit</button>
    </form>
    <div id="div1">
    </div>      
  </body>
</html>

这是我的 table.php

<?php

$con = mysqli_connect("localhost","root","","study");

if (mysqli_connect_errno($con)) 
{
  echo "Failed to connect to mysql" . mysqli_connect_error();
}

echo '<table border = 1>';
echo '<tr>';
echo ' <th>FIRSTNAME</th>';
echo '<th>LASTNAME</th>';
echo ' <th>MIDDLENAME</th>';
echo ' <th>DELETE</th>';
echo ' </tr>';
$result = mysqli_query($con,"SELECT * FROM sample_employers");
while($row=mysqli_fetch_array($result))
{
  echo "<tr>";
  echo "<td>" . $row['firstname'] . "</td>";
  echo "<td>" . $row['lastname'] . "</td>";
  echo "<td>" . $row['middlename'] . "</td>";
  echo "<td> <input type='button' value='Delete' </td>"; 
  echo "</tr>";
}
mysqli_close($con);
echo '</table>';
?>

我在 index.php 中做了一些编辑。我将提交按钮放在表单标记之外并出现了html表，但现在的问题是没有数据插入到数据库中。那么我将如何使html表出现并同时将数据插入数据库时我点击提交按钮。？？

4

2 回答 2

0 
// example 1 GET
$(document).ready(function(){
  $("#submitButt").click(function(e){    // u should give a id to the button. 
    e.preventDefault();    // this is to prevent the form submit by it self

    // using ajax to submit
    $("#div1").load("insert.php",
        $(this.form).serialize();    // this will use GET to submit data
    );
  });
});

// example 2 POST
$(document).ready(function(){
  $("#submitButt").click(function(e){    // u should give a id to the button. 
    e.preventDefault();    // this is to prevent the form submit by it self

    // using ajax to submit
    $("#div1").load("insert.php",
        $(this.form).serializeArray();    // this will use POST to submit data
    );
  });
});


http://jsfiddle.net/9kcek/

当您单击提交按钮时，使用 Tamper Data 检查请求。

于 2013-07-10T02:01:41.907 回答
0

如果您按提交，那么您将被重定向到insert.php. 因此，您的点击事件将永远不会被执行。您必须先阻止重定向才能加载数据。

此外，您将需要切换发布数据的方式。由于您想直接在当前页面上插入表格，您应该切换到ajax方法。您的数据将通过insert.php后台发送给您$.ajax，然后您可以#div1使用table.php.

<script>
    $(document).ready(function () {
        var $form = $('form');
        $form.submit(function (event) {
            event.preventDefault();

            var formData = $form.serialize(),
                url = $form.attr('action');

            $.ajax({
                type: "POST",
                url: url,
                data: formData,
                success: function () {
                    $("#div1").load("table.php");
                }
            });
        });
    });
</script>
于 2013-07-10T02:32:46.090 回答