Converting PHP/MySQL Request into jQuery AJAX Request

Question

I am kicking myself in the arse here because i can't for the life of me figure it out...this is supposed to be a quick and dirty project, but, I decided i want to try something new, and I have little to no experience with the AJAX methods in jQuery...I spent quite literally 5 days trying to learn and understand how to appropriately implement the AJAX calls, but to know avail...I learned some basic stuff, but not what i need to execute the code below.

Again, I am wondering how to go about converting this standard request to AJAX using jQuery...

here is my form & php

HTML:

<form action="categories.php?action=newCategory" method="post">
  <input name="category" type="text" />
  <input name="submit" type="submit" value="Add Categories"/>
</form>

PHP:

<?php
if (isset($_POST['submit'])) {
  if (!empty($_POST['category'])) {
    if ($_GET['action'] == 'newCategory') {
      $categories = $_POST['category'];
      $query = "SELECT * FROM categories WHERE category ='$categories' ";
      $result = mysql_query($query) or die(mysql_error());
      if (mysql_num_rows($result)) {
        echo '<script>alert("The Following Catergories Already Exist: ' . $categories . '")</script>';
      } else {
    // Simply cleans any spaces
        $clean = str_replace(' ', '', $categories);
    // Makes it possible to add multiple categories delimited by a comma
        $array = explode(",", $clean);
        foreach ($array as &$newCategory) {
          mysql_query("INSERT INTO categories (category) VALUES ('$newCategory')");
        }
        echo "<script>alert('The following Categories have been added successfully: " . $categories . "')</script>";
      }
    }
  } else {
    echo "<script>alert('Please Enter at Least One Category.')</script>";
  }
}
?>

You can place button with onclick event instead of submit and avoid action from form. It will send to javascript function, where jquery ajax can be implemented... — Justin John, Apr 14 '12 at 04:30
notice: the query is pretty acceptable for SQL injection, not? — nuala, Apr 14 '12 at 05:13

score 1 · Answer 1 · edited Dec 05 '15 at 01:58

here's the proper syntax for making the call in the background and not submitting the form, but still sending/retrieving results.

$(function(){
  $('form').submit(function(e){
    e.preventDefault(); // stop default form submission
    $.ajax({
      url: 'categories.php',
      data: 'action=newCategory',
      success: function(data){
        //here we have the results returned from the PHP file as 'data'
        //you can update your form, append the object, do whatever you want with it
        //example:
        alert(data);
      }
    });
  });
});

Also:

I would not do this ->

echo "<script>alert('Please Enter at Least One Category.')</script>";

Just do echo 'Please Enter at Least One Category.';

If you need to create an error system, you can do things like,

echo "Error 1001: <!> Please enter at least One Category!';

Then in your Ajax callback for 'success', we can split the returned object in <!>. Example to follow:

success: function(data){
  if($(data+':contains("<!>")'){
    var errMsg = $(data).split('<!>');
    alert(errMsg[0]+' : '+errMsg[1]);
    //above would output - Error 1001 : Please enter at least One Category!;
  }
}

actually it would output `Error 1001: : Please enter at least One Category.` (^.^)" — nuala, Apr 14 '12 at 04:49
Oh god, the trolls are out in force tonight. Edited to be grammatically correct. — Ohgodwhy, Apr 14 '12 at 04:50
ok something more productive :* here you'll find mentioned how to read form data in the submit() method if necessary. http://stackoverflow.com/questions/169506/obtain-form-input-fields-using-jquery — nuala, Apr 14 '12 at 05:10

Converting PHP/MySQL Request into jQuery AJAX Request

1 Answers1