1

I'm creating a basic website with a button that, when clicked, makes a jquery Ajax call to a php script that echoes something back.

things I've tried:

I've looked at Call php function from JavaScript to make sure I wasn't just making a syntax error, but that didn't help.

I've changed the dataType part of my jquery call to script, html, json, and text, but it just wound up returning the entire code in some cases (e.g. just alerting test.php without executing it) and throwing an error:

XML Parsing Error: no root element found

Location: file:///Users/jonathansekela/Documents/Projects/sz12-library/php/test.php

Line Number 9, Column 3

in the case of json, the error:

error: parsererror: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

From what I can tell, whenever I try to get jQuery to execute some PHP with a simple Ajax call, it doesn't execute the PHP, instead simply treating it like pure xml and returning the entire thing as a string back to my function without doing any of the php.

The end-goal:

when pressed, the button in the html will call a js function that makes an Ajax call to a php script. The php script then connects to a mysql database, does some stuff, returns, some other stuff, and gives that other stuff back to the jQuery call so it can put some results back on the html screen. Literally basic proof-of-concept level stuff, except for the one part where my computer doesn't think that the php is actually php.

What am I missing here? Any and all suggestions welcome. I will add any extra information if requested.

index.html:

<div class = "row">
    <div class="col-xs-12 btn btn-default button" onclick="test();">
        test ajax
    </div>
</div>

js/index.js:

var test = () => {
    $("#button-text").html("test clicked");
    $.ajax({
        type: "POST",
        data: {
            user: 1,
            first: "jonny",
            last: "test"
        },
        url: "php/test.php",
        dataType: "html",
        success: function(result) {
            alert("success: "+result);
    },
    error: function(xhr, status, error) {
        alert("error: "+status + ': ' + error);
    }
    });
}

php/test.php:

<?php
function test() {
    $user = $_POST['user'];
    $first = $_POST['first'];
    $last = $_POST['last'];
    echo "your data: ".$user." + ".$first." + ".$last;
}
test();
?>
Community
  • 1
  • 1
Jonathan
  • 104
  • 1
  • 10
  • 1
    instead of dataType: "html", use dataType: "json", – Sultan Khan Dec 27 '17 at 07:31
  • @SultanKhan Thanks, but that didn't work - just gave me a different syntax error :\ Any other ideas? – Jonathan Dec 27 '17 at 08:23
  • remove dataType – Roy Bogado Dec 27 '17 at 08:26
  • 1
    In which server you are running your php, and you sure about the php interpreter setup properly in your web server.? – kakurala Dec 27 '17 at 08:48
  • @kakurala That may be my problem - I haven't setup a web server at all. Everything's just code on my MacBook without any apache or other stuff. To test my code up to this point, I've been going to my index.html page on a web browser and clicking the button. ...I need to setup a proper LAMP stack on a cloud computer and upload the code there before I start making php calls, don't I? – Jonathan Dec 27 '17 at 11:02
  • 1
    you can setup lamp on your mac itself! After setup completed just copy your html, php files into htdocs directory then you can access your page at `http://localhost/index.html` or `http://localhost/`. – kakurala Dec 27 '17 at 11:08

1 Answers1

0

The answer, as explained by the amazing Kakurala: I need to put my code on a server with a LAMP/XAMP stack running before I can call PHP. So either setup a LAMP stack on my laptop for dev purposes or get a cloud server and set it up there (an AWS EC2 instance, for example). Thanks a ton for your help, friend!

Jonathan
  • 104
  • 1
  • 10