Php 如何使用ajax和jquery显示html表？_Php_Jquery_Html_Ajax

Php 如何使用ajax和jquery显示html表？

php jquery html ajax

Php 如何使用ajax和jquery显示html表？,php,jquery,html,ajax,Php,Jquery,Html,Ajax,当我点击submit按钮时，我一直试图让我的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>

当我点击submit按钮时，我一直试图让我的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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#div1”）.load（“table.php”）；
});
});
名字：

姓氏：

中间名：

提交

这是我的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表出现，同时将数据插入到数据库中呢

// 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/

单击提交按钮时，使用篡改数据检查请求。

如果按提交，则会重定向到

insert.php

。因此，您的单击事件将永远不会执行。您必须先阻止重定向，才能加载数据

此外，您还需要切换数据发布的方式。由于要在当前页面上直接插入表，因此应该切换到ajax方法。您的数据将通过

$.ajax

发送到后台的

insert.php

，然后您可以使用

table.php

的内容加载

#div1

<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>


$（文档）.ready（函数（）{
变量$form=$（'form'）；
$form.submit（函数（事件）{
event.preventDefault（）；
var formData=$form.serialize（），
url=$form.attr（'action'）；
$.ajax({
类型：“POST”，
url:url，
数据：formData，
成功：函数（）{
$（“#div1”）.load（“table.php”）；
}
});
});
});

如果您单独运行table.php，它是否返回任何内容？@Nick yes..当我运行table.phpWhy您移动了表单并提交按钮？@Paul您的意思是什么？我移动了提交按钮以尝试它是否工作..如果您使用firefox或chrome，请检查是否确实发出了请求。谢谢..但这段代码是什么平均值？？var formData=$form.serialize（），url=$form.attr（'action'）@jmjassy27

$form.serialize（）

将表单数据转换为url编码的字符串，然后可以发布该字符串

$form.attr（'action'）

读取表单标记的属性

action

，在您的示例中是

insert.php

。它是数据应发布到的url。不要被逗号分隔混淆。如需进一步参考，请参阅和。@jmjassy27我的代码与上的示例非常相似。