没有反馈PHP和AJAX“ POST”

Question

after I click a button, there are no respond at all at the page.

I use post method to get the variable in the ajax file. Here are the code.

the original.php is the file that contain the form that get value, and sent it to the ajax file.

stockProcess.php is the ajax file that run a sql process to update the stock in the database.

original.php

<div id='status'></div>

<input type='number' name='quantity' style='max-width:50px' id='quantity'/>

<button class='btn btn-xs btn-success' onClick='add('pen100')'>
    <i class='ace-icon fa fa-plus bigger-120'></i>
</button>

<script type="text/javascript">
function add(serialNo)
{
    var quantity = document.getElementById("quantity").value;
    var type = "add";

    if (quantity == null)
    {
        document.getElementById("status").innerHTML = "<p><b><font color='red'>PLEASE INPUT A VALUE</font></b></p>";
    }
    else if (quantity < 0)
    {
        document.getElementById("status").innerHTML = "<p><b><font color='red'>WRONG VALUE<br />PLEASE ENTER VALUE LARGER THAN 0</font></b></p>";
    }
    else
    { 
        if (window.XMLHttpRequest)
        {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else
        {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function()
        {
            if (this.readyState == 4 && this.status == 200) 
            {
                document.getElementById("status").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("POST","stockProcess.php?serialNo="+serialNo+"&quantity="+quantity+"&type="+type, true);
        xmlhttp.send();
    }
}
</script>

stockProcess.php

<?php

$serialNo = $_POST['serialNo'];
$quantity = $_POST['quantity'];
$type = $_POST['type'];

if ($type == "add")
    {
        $newQ = $quantity + 50;
        $sqlAdd = "UPDATE medicinestock SET quantity=$newQ WHERE serialNo='$serialNo'";
        $queryAdd = $conn -> query($sqlAdd);

        if ($queryAdd == TRUE)
        {
            echo "<b><p><font color='green'>STOCK HAS BEEN UPDATE</font></p></b>";
        }
        else
        {
            $err = $conn -> error;
            echo "<b><p><font color='red'>SYSTEM ERROR : $err</font></p></b>";
        }
    }
?>

Answer 1

Try This code:

    <div id='status'></div>
    <input type='number' name='quantity' style='max-width:50px' id='quantity'/>
    <button class='btn btn-xs btn-success ajaxBtn' data-param-serialNo="pen100">
        <i class='ace-icon fa fa-plus bigger-120'></i>
    </button>

    <script>
$(document).ready(function(e){
    $("button.ajaxBtn").on('click',function(e){
        e.preventDefault();
        var serialNo = $(this).attr('data-param-serialNo');
      var quantity = $('input[name="quantity"]').val();
      var type = "add";

      if(quantity == null){
        $('div#status').append("<p><b><font color='red'>PLEASE INPUT A VALUE</font></b></p>");
      }else if(quantity < 0){
        $('div#status').append("<p><b><font color='red'>WRONG VALUE<br />PLEASE ENTER VALUE LARGER THAN 0</font></b></p>");
      }else{
        $data = "serialNo="+serialNo+"&quantity="+quantity+"&type="+type;
        $.ajax({
          url: "stockProcess.php",
          data: $data,
          type: 'POST',
          dataType: 'json',
          success: function (data) {
            $("#status").append(data);
          }
        });
      }
    });
})
    </script>