Question

如果这是重复的话，我提前道歉，但我搜索了stackoverflow并且没有找到关于此主题的内容。在我的base.html中，我有一个这样的表单：

<form method="post" action="../php/base.php">
   <input type="hidden" name="addToDB" value="addToDB" />
   <input type="text" id="name" name="name" placeholder="Enter name">
   <input type="text" id="address" name="address" placeholder="Enter address">
   <button type="submit">Submit</button>
</form>

注意一个虚拟的input元素;它将在PHP中用于定位此表单（这是一个很好的做法吗？）base.php具有以下内容：

if (isset($_POST['addToDB'])) {
    create_tables(); // creates tables in DB
    addToDB(); // inserts content to DB
}

function addToDB() {
try {
    // open DB connection
    $db = new PDO("sqlite:../db/mydb.sqlite");

    $name= $_POST['name'];
    $address= $_POST['address'];

    $db->exec("INSERT INTO Person (P_Name, P_Address) VALUES ('$name', '$address');");

    // The following needs to be redirected back to base.html:
    print "<table border=1>";
    print "<tr><td>Name</td><td>Address</td></tr>";
    $result = $db->query('SELECT * FROM Person');
    foreach($result as $row)
    {
        print "<tr><td>".$row['P_Name']."</td>";
        print "<td>".$row['P_Address']."</td></tr>";
    }
    print "</table>";

}catch(PDOException $e)
  {
      echo $e->getMessage();
  }
}

单击提交按钮时，文件base.php将打开并显示一个表格。相反，我希望执行base.php中的脚本并将输出发送回base.html，这将显示在（内容div中的某个位置）。

我明白我可能需要使用AJAX，但我无法弄清楚如何调用外部PHP文件中的特定函数并重定向其返回值（可能是带有HTML标记的字符串，以构造{{1 }}）返回HTML文件（table）
我使用SQLite进行数据存储;数据库是使用base.html
我是PHP的新手，任何意见/建议都会受到高度赞赏。

谢谢你

Answer 1

您可以使用HTML，jQuery AJAX和PHP尝试以下内容：

<强> HTML：

<form method="post"  id="formid">
   <input type="hidden" name="addToDB" value="addToDB" />
   <input type="text" id="name" name="name" placeholder="Enter name">
   <input type="text" id="address" name="address" placeholder="Enter address">
   <!-- take simple button -->
   <button type="button" id="submit">Submit</button>
</form>
    <div id="response"></div>

<强> JavaScript的：

<script type="text/javascript">
  $(document).ready(function(){
      //on click of submit button
      $("#submit").click(function(){
          $.ajax({
              url:"../php/base.php",
                  data:{
                          addToDB:"addToDB",
                          name:$("#name").val(),
                          address:$("#address").val()
                       },
                          type:"POST",
                          success:function(res){
                          $("#response").html(res);
                       }
             });
       });
 });
</script>

不会对您的PHP进行任何更改。祝你好运。

Answer 2

I want the ... output sent back to the base.html

那么为什么不在其中处理。

form.php的

<?php

//  you can save this two functions in a file 'DBhelper.php';
//  then you can 'require(DBhelper.php') here to make this file a little cleaner
//  function create_tables(){
//     put your codes here...
//  }; 
function addToDBandGetAllUsers($name,$address) {
try {
    // open DB connection
    $db = new PDO("sqlite:../db/mydb.sqlite");
    $db->exec("INSERT INTO Person (P_Name, P_Address) VALUES ('$name', '$address');");

    //The following needs to be redirected back to base.html:
    $result = $db->query('SELECT * FROM Person');
    // this data is for test, even the 1 + 1 solution, I will test it, I don't want to post codes in community with errors....
    // $result = array(
    //  array('P_Name' => 'John','P_Address' => 'Foobar'),
    //  array('P_Name' => 'Alex','P_Address' => 'Qux')
    //  );
    // array_push($result, array('P_Name' => $name,'P_Address' => $address));
    return $result;
}catch(PDOException $e)
  {
     echo $e->getMessage();
  }
}
// if the $_POST['name'] is not empty, we will update db
// this is just a basic validation, if we use isset() instead of empty(),
// the form can be submitted with a empty value;
if (! empty($_POST['name']) && ! empty($_POST['address']) ){
    create_tables(); // creates tables in DB

    // I change the the function name , since this guy do a lot of things.... 
    $result = addToDBandGetAllUsers($_POST['name'],$_POST['address']);
} else{
    echo 'Please fill the form.';
} 


?>

<!DOCTYPE html>
<html>
<head>
    <title>form</title>
</head>
<body>
// if we got $result, that means the form has been submitted, so we can display the table;
<?php if (isset($result)) :
    echo '<h1>All users:</h1>';
    print "<table border=1>";
    print "<tr><td>Name</td><td>Address</td></tr>";
    foreach($result as $row)
    {
        print "<tr><td>".$row['P_Name']."</td>";
        print "<td>".$row['P_Address']."</td></tr>";
    }
    print "</table>";
    echo '<hr>';
    endif;
?>
<form method="post" action="form.php">
   <input type="hidden" name="addToDB" value="addToDB" />
   <input type="text" id="name" name="name" placeholder="Enter name">
   <input type="text" id="address" name="address" placeholder="Enter address">
   <button type="submit">Submit</button>
</form>
</body>
</html>

＆＃39;行动＆＃39;形式元素是它的自我。

Answer 3

您可以更改base.html文件，如下所示：

<form method="post" action="../php/base.php" id="formid" onsubmit='return false;'>
       <input type="hidden" name="addToDB" value="addToDB" />
       <input type="text" id="name" name="name" placeholder="Enter name">
       <input type="text" id="address" name="address" placeholder="Enter address">
       <button type="submit" id="submit">Submit</button>
 </form>
 <div id="display"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#submit").on("click",function(e){
        e.preventDefault();
        var formdata=$("#formid").serialize();
        var url=$("#formid").attr("action");

        $.post(url,formdata,function(data){
         $("#display").html(data);   
        },'json');

    });

});
</script>

这对你有帮助。

如何将输出从php重定向到html？

3 个答案: