Php AJAX not working in conjunction with my PHP script and mysql

Question

So, I am publishing my first PHP function, which I am proud of, but I recently learned about AJAX and wanted to test it. Unfortunately, I cannot get it to work.

---

My experience: PHP (3 weeks). CSS3, HTML, Basic Javascript.

---

My problem: Getting AJAX to work. I want ajax to get my data from a php file that receives votes from a test server database (Xampp). Therefore, every time the user clicks on a good or bad file, AJAX should display new results without refreshing the page. However, the problem is that: A) My if statements work by checking isset ($ _ POST), which will no longer work if I call AJAX. B) Prevention of updates. C) Updating AJAX after each click. I know them almost there, I just missed something, and I don’t know for sure that it should be honest.

---

What I tried: Checking the database connection. Checked if my PHP code works without ajax and it does a great job (I just demonstrate half the functionality here, the lightened version, for simplicity). Tried to change submit to button. Clearing the cache. JQuery is at the head of my document, and the path is right. I looked through the textbooks and read the documentation, but I'm not going anywhere, possibly due to lack of experience.

Edit: Sessions and everything that works with php is fine. I have my session start and database connection enabled at the very top.

---

Summary: How to fix this ajax so that it always updates my numbers?

---

Let me know if you want me to explain parts of my PHP code. I want to comment on the details if necessary.

---

JQUERY / AJAX CODE

function vote() { var request = $.ajax({ url: "php/core/voting_system.php", type: "POST", dataType: 'html' }); request.done(function(vote_sum) { $("#votes").html(vote_sum); }); } 

HTML code:

 <div id='votes'></div> <form id="good" action="" method="post"> <input type="submit" name="good" onclick="vote()" value="+"> </form> <form id="bad" action="" method="post"> <input type="submit" name="bad" onclick="vote()" value="-"> </form> 

Answer 1

In HTML you don’t need <form> , you do it with AJAX , right?

 <div id='votes'></div> <button onclick="vote('good');">+</button> <button onclick="vote('bad');">-</button> 

JavaScript makes post easier than AJAX function

 function vote(gb) { $.post("php/core/voting_system.php", { vote: gb }, function(vote_sum) { $("#votes").html(vote_sum); }); } 

In PHP, extract the vote and use it as needed (add check / sanitation):

 $vote = $_POST['vote']; // either 'good', or 'bad' // do what you need with it 

Answer 2

TL DR version:

You did not specify a data field inside your $.ajax . In addition, your script does not check which button was clicked.

extended version

When you make a call to $.ajax , you cannot append any data to the request. This can be done like this:

  $.ajax({ method: 'POST', dataType: 'json', data: ...someJSONData... }); 

Usually you need to pass JSON to anything, because it can contain complex structures of objects that you usually want to bind between the client and server. You are clearly not in this example, but if you are trying to learn this material, it is better to start correctly.

Both javascript and php make using the JSON format extremely easy: JS JSON.stringify () and JSON.parse (), PHP json_encode () and json_decode ().

 function vote(e) { // e.target.id stores the id of the button that was clicked var data = {vote: e.target.id} $.ajax({ method: 'POST', dataType: 'json', data: JSON.stringify(data), ... callbacks and other properties ... }); } document.getElementById("good").addEventListener("click", vote); document.getElementById("bad").addEventListener("click", vote); 

This will be a simple example of how you could solve your problem. If you var_dump simple var_dump in your PHP script after running the data through json_decode() , you will get a nice associative array:

 [ 'data' => 'good', ] 

Hopefully this illustrates how easy it is to transfer data in this format.

Also note that I have defined event handlers in javascript. This is usually better because you keep all your javascript in one place and this makes things cleaner and easier to debug.

Answer 3

As Jay said, you are not sending POST data through AJAX. You also need to drop your results from PHP.

 function vote(event) { event.preventDefault(); $.ajax({ url: "php/core/voting_system.php", type: "POST", dataType: 'html', data: 'bad='+$('input[name="bad"]').val()+'&good='+$('input[name="good"]').val(), success: function(data){ var votes = $("#votes").val().empty(); $("#votes").html(data+votes); } ]); }