使用php和jquery的AJAX表单提交

时间:2014-01-19 02:50:23

标签: javascript php jquery ajax forms

我已经查看了我能找到的所有内容,但我无法弄清楚为什么我无法完善此代码。我想要做的是允许用户删除他们在我的网站上发布的内容而不进行页面刷新。该表单将被传递给将修改我的MySQL数据库的php文件。我是ajax的新手,并且在短时间内也只使用了PHP。

形式:

<form class='status_feedback' id='delete_status' onsubmit='delete_status()' action=''>
<input type='hidden' name='status_id' id='status_id' value='$status_id'/>
<input type='submit' value='X'/>
</form>

delete_status()

function delete_status(){
$.ajax({  
type: "POST",  
url: "/scripts/home/php/delete_status.php/",  
data: status_id,  
success: function() {  
//display message back to user here  
}  
});  
return false;
}

delete_status.php

<?php
$con=mysqli_connect("localhost","USER","PASSWORD","DB");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$status_id = $_POST['status_id'];
mysqli_query($con,"UPDATE status SET visibility = 'hidden' WHERE id = $status_id");



?>

此时,当我点击delete_status()功能时发生的所有事情都是我的页面刷新并将?status_id=194(当我点击状态#194时)添加到结尾或我的网址。

任何帮助都会很棒。我已经研究了好几天了。

2 个答案:

答案 0 :(得分:2)

稍微改变你的HTML,Ajax和php。

<强> HTML

Add this code:

      <body>

         <form class='status_feedback' id='delete_status' >
          <input type='hidden' name='status_id' id='status_id' value='$status_id'/>
          <input type='button' id='x_submit' value='X' />
         </form>

        <script>
           $('#x_submit').on("click",function(){

            var status_id= $('#status_id').val();

            //Delete the alert message if you want.
            alert("Check your status id :"+status_id);

               $.ajax({  
                      type: "GET",  
                      url: "/scripts/home/php/delete_status.php?",  
                      data: {status_id:status_id}, 
                      dataType:'JSON',
                      success: function(json) {  
                             //display message back to user here 
                              alert(json[0].response); 
                           }  
                     }); 

          });
        </script>

<强> PHP:

   <?php
        header("Access-Control-Allow-Origin: *");
        header('Access-Control-Allow-Methods: GET, POST'); 
        header('Content-type: application/json');

        $con=mysql_connect("localhost","USER","PASSWORD","DB");
      // Check connection
     if (mysql_connect_errno())
           {
            echo "Failed to connect to MySQL: " . mysql_connect_error();
           }

           $status_id = $_GET['status_id'];

           $result = mysql_query("UPDATE status SET visibility = 'hidden'
                     WHERE id = '$status_id'");

           if(! $result )
                 {
                    $data[]=array('response'=>"Unable to insert!"); 
                 }
           else

                 {

                 $data[]=array('response'=>"Data successfully inserted into the database!");

                  }

          $json_encode = json_encode($data);

          print("$json_encode");

   ?>

希望它能奏效。

答案 1 :(得分:0)

您没有取消表单提交

onsubmit='delete_status()'

需要

onsubmit='return delete_status()'

和数据:status_id,看起来不对,除非您在其他地方定义了变量