使用php表单将记录添加到mysql数据库，而无需离开/刷新页面

时间：2014-08-11 14:07:38

标签： php html mysql ajax forms

我使用此文件 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>

一切正常：当我点击＆＃34;发送＆＃34;按钮，input.php添加记录并重定向回page-with-form.php。您甚至无法看到input.php加载，但是您确实看到了page-with-form.php正在刷新。

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

4 个答案:

答案 0 :(得分：3)

您想使用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);
    }
});

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

答案 1 :(得分：2)

你必须使用ajax将数据插入mysql而不使用page refreh 

<form method='post' id='SaveForm' action="#">

<table class='table table-bordered'>

    <tr>
        <td>Name</td>
        <td><input type='text' name='name' /></td>
    </tr>

    <tr>
        <td>Employee Department</td>
        <td><input type='text' name='dept' ></td>
    </tr>

    <tr>
        <td colspan="2">
        <button type="submit" name="btn-save" id="btn-save"></button>  
        </td>
    </tr>

</table>

，PHP代码为：

<?php
 if($_POST)
 {
    $emp_name = $_POST['name'];
    $emp_dept = $_POST['dept'];

    try{

     $stmt = $db_con->prepare("INSERT INTO tbl_employees(emp_name,emp_dept)   VALUES(:ename, :edept)");
     $stmt->bindParam(":ename", $emp_name);
     $stmt->bindParam(":edept", $emp_dept);

     if($stmt->execute())
     {
        echo "Successfully Added";
     }
     else{
     echo "Query Problem";
     } 
  }
    catch(PDOException $e){
       echo $e->getMessage();
    }
  }

?>

和jquery ajax代码是：

/* Data Insert Starts Here */
   $(document).on('submit', '#emp-SaveForm', function() {

    $.post("create.php", $(this).serialize())
    .done(function(data){
     $("#dis").fadeIn('slow', function(){
     $("#dis").html('<div class="alert alert-info">'+data+'</div>');
     $("#emp-SaveForm")[0].reset();
     }); 
   });   
  return false;
});
/* Data Insert Ends Here */

点击以下链接获取详细文章：

jQuery Ajax Insert, Update and Delete with PHP MySQL

答案 2 :(得分：0)

你想要

Button.click(function(){
 $.Ajax(
  Data: data,
  Success: 
   What you want to do on success
   Such as set HTML to div element
  )
 })

只需查看Ajax的jQuery API，就可以了。

写在手机上，如果你想要我可以扩展答案。

答案 3 :(得分：0)

您必须使用ajax来实现目标让我们以这个简单的html表单为例

<form id='myform' action='insert.php' method='post'>
  Name: <input type='text' name='name' />
  Address: <input type='text' name='address' />
</form>

而且php是

$name = $_POST['name'];
$address= $_POST['address'];
$sql = "insert into peoples (name,address) values('$name','$address')";
if(mysql_query($sql)){
   echo 'successfully inserted';
}else{
   echo 'could not insert';
}

使用jQuery的Javascript是

$('#myform').submit(function(){ return false; });
$('#submit').click(function(){
   $.post($('#myform').attr('action'),
   $('#myform :input').serializeArray(),
function(output){   $('#result').html(output); }); });

For detailed description you check here

相关问题
最新问题