Passing variable to PHP with AJAX doesn't work

Question

I'm trying to pass an integer to php code where it would then store it to WAMP sql db, however I can't get this to work.

JS function - item is the integer I want to store:

function storeData(item){
    $.ajax({
        url: 'insert.php',
        type: 'POST',
        data: {
            'var1': item
        },
        success: function(results) {
            console.log("success");
        },
        error: function(results){
            console.log("error");
        }
    });
}

PHP file:

<?php
    $host = "localhost:3306";
    $user = "root";
    $pass = "";
    $databaseName = "items";

    $con = mysqli_connect($host,$user,$pass, $databaseName);
    //$dbs = mysqli_select_db($databaseName, $con);

    $itemNumber = $_POST['var1'];

    echo json_encode($itemNumber);

    $sql = "INSERT INTO item_list (item_number) VALUES ('$itemNumber')";
    mysqli_query($con, $sql) or die(mysqli_error());
?>

I just get this error - XML Parsing Error: no element found Location: file:///C:/wamp64/www/bootstrap-3.3.7-dist/insert.php Line Number 8, Column 3:

Answer 1

Just querying the database is not enough. You then have to send something back to the javascript. A status message would be enough in this case

<?php
    $host = "localhost:3306";
    $user = "root";
    $pass = "";
    $databaseName = "items";

    $con = mysqli_connect($host,$user,$pass, $databaseName);
    //$dbs = mysqli_select_db($databaseName, $con);

    $itemNumber = $_POST['var1'];

    echo json_encode($itemNumber);

    $sql = "INSERT INTO item_list (item_number) VALUES ('$itemNumber')";
    $result = mysqli_query($con, $sql) or die(mysqli_error());

    if (!$result) {
        echo json_encode(array('status' => 'FAILED'));
    } else {
        echo json_encode(array('status' => 'OK'));
    }
?>

And in your js code

function storeData(item){
    $.ajax({
        url: 'insert.php',
        type: 'POST',
        data: {'var1': item },
        success: function(data) {
            console.log("In success method");
            console.log("status returned " + data.status);
        },
        error: function(data){
            console.log("error");
        }
    });
}

Answer 2

For the console.log to work u need a success method, so change it from:

function storeData(item){
    $.ajax({
      url: 'insert.php',
      type: 'POST',
      data: {
        var1: item
      }
    });}

To:

function storeData(item){
    $.ajax({
      url: 'insert.php',
      type: 'POST',
      data: {
        var1: item
      },
      success: function(results) {
        console.log(results);
      }
    });}

Also for better reading I recommend u to json_encode your data:

echo json_encode($itemNumber);
exit;

Answer 3

I figured out what was wrong, apparently I needed to specify full path for URL, didn't think it was required as both, main file and php file were in the same folder.

function storeData(item){
    $.ajax({
        url: 'http://localhost/bootstrap-3.3.7-dist/main.php',
        type: 'POST',
        data: {
            'var1': item
        },
        success: function(results) {
            console.log("success");
        },
        error: function(results){
            console.log("error");
        }
    });
    return false;
}