php - 在不离开/刷新页面的情况下，使用php表单向mysql数据库添加记录

Question

我使用此文件 input.php 将记录添加到数据库:

$order = "INSERT INTO wp_userdata
            (username, product_name, product_brand)
            VALUES
            ('$_POST[username]',
                        '$_POST[name]',
            '$_POST[brand]')";


$result = mysql_query($order);  
if($result){
    header( 'Location: http://page-with-form.php' ) ;
} else{
    echo("<br>Input data is fail");
}

还有我的表单 page-with-form.php:

<table border="1">
  <tr>
    <td align="center">Add Products</td>
  </tr>
  <tr>
    <td>
      <table>
        <form method="post" action="input.php">
<input type="hidden" name="username" value="[insert_php]echo $username;[/insert_php]">
        <tr>
          <td>Product Name</td>
          <td><input type="text" name="name" size="50">
          </td>
        </tr>
        <tr>
          <td>Brand</td>
          <td><input type="text" name="brand" size="50">
          </td>
        </tr>
        <tr>
          <td></td>
          <td align="right"><input type="submit" name="submit" value="Send"></td>
        </tr>
</form>
        </table>
      </td>
    </tr>
</table>

一切正常:当我单击“发送”按钮时，input.php 添加记录并重定向回 page-with-form.php。您甚至看不到 input.php 正在加载，但是您确实看到 page-with-form.php 正在刷新。

有没有办法在不刷新page-with-form.php的情况下进行所有操作？我认为这与 Ajax 有关，但也许还有另一种方式？期待您的建议!

Answer 1

您想使用 AJAX 提交表单，

您可以使用 JQuery 来帮助实现这一点，您需要做的第一件事是确保您的表单不会刷新页面，并为您的按钮指定一个 ID，这样可以更容易地通过 JQuery 找到按钮

首先让我们从您的 PHP 代码中删除导致服务器端重定向的那一行，而是让它生成一个字符串，说明数据已成功保存，无论此脚本在 HTTP 响应中打印什么，都将由 ajax 部分使用这个项目

$order = "INSERT INTO wp_userdata
            (username, product_name, product_brand)
            VALUES
            ('$_POST[username]',
                        '$_POST[name]',
            '$_POST[brand]')";


$result = mysql_query($order);  
if($result){
    echo ("DATA SAVED SUCCESSFULLY");
} else{
    echo("Input data is fail");
}

然后让我们修改 HTML，让 Jquery 更容易找到我们需要的元素并输出状态(这不是唯一的方法，如果你有多个表单，不推荐这样做，Jquery 有更复杂的查找表单的方法元素 http://api.jquery.com/input-selector/ )

我只是想简单地说明这个想法，而不是过多地了解 Jquery 的细节。

<table border="1">
      <tr>
        <td align="center">Add Products</td>
      </tr>
      <tr>
        <td>
          <table>
            <!-- THIS TELLS THE FORM TO NOT REFRESH THE PAGE -->
            <form onsubmit="return false">
    <input type="hidden" name="username" id="hdn_username" value="[insert_php]echo $username;[/insert_php]">
            <tr>
              <td>Product Name</td>
              <td><input type="text" id="txt_name" name="name" size="50">
              </td>
            </tr>
            <tr>
              <td>Brand</td>
              <td><input type="text" id="txt_brand" name="brand" size="50">
              </td>
            </tr>
            <!-- THIS ROW WILL DISPLAY THE RESULT OF THE LAST ENTRY -->`
            <tr>
                <td></td>
                <td><div id="status_text" /></td>
            </tr>
            <tr>
              <td></td>
              <td align="right">
                <!-- I GAVE THE BUTTON AN ID THAT WILL MAKE IT EASIER TO FIND WITH JQUERY -->
                <input type="submit" id="btn_submit" name="submit" value="Send"></td>
            </tr>
    </form>
            </table>
          </td>
        </tr>
    </table>

现在是 Javascript 版本，它将使用 Jquery 的帮助实现 AJAX

Javascript 会做的是，当您单击按钮时，它会发送到您的 input.php 并且输入 PHP 会返回结果文本。

//on the click of the submit button 
$("#btn_submit").click(function(){
 //get the form values
 var username = $('#hdn_username').val();     
 var name = $('#txt_name').val();     
 var brand = $('#txt_brand').val(); 

 //make the postdata
 var postData = 'username='+username+'&name='+name+'&brand='+brand;

 //call your input.php script in the background, when it returns it will call the success function if the request was successful or the error one if there was an issue (like a 404, 500 or any other error status)

 $.ajax({
    url : "input.php",
    type: "POST",
    data : postData,
    success: function(data,status, xhr)
    {
        //if success then just output the text to the status div then clear the form inputs to prepare for new data
        $("#status_text").html(data);
        $('#name').val('');
        $('#brand').val('');
    },
    error: function (jqXHR, status, errorThrown)
    {
        //if fail show error and server status
        $("#status_text").html('there was an error ' + errorThrown + ' with status ' + textStatus);
    }
});

应该发生的是，您在表单中输入数据，您会看到成功或错误的状态，如果成功，表单将被清除以供您添加更多输入。