Doing an ajax call to a php page

Question

I have this star rating, I implemented from jQuery and I need to save the comments, the user id and the value of the star clicked. What I do not know is how to pass that through the ajax call and what the PHP should have at the least to process the call? Here is my code

stars code - as you can see it has a comments box , the stars with star value and the user id is stored in a variable called

$user_id

Here is the code

<tr>
         <td style="padding:10px;">
         <span style="font-size: 20px; vertical-align:top;">Comments</span>
         </td>
         <td style="padding:10px;">
         <textarea name="comments1" cols="60" rows="2"></textarea>
         </td>
         <td>
         <div>
          <input name="star1" value "1" type="radio" class="star"/>
          <input name="star1" value="2" type="radio" class="star"/>
          <input name="star1" value="3" type="radio" class="star"/>
          <input name="star1" value="4" type="radio" class="star"/>
          <input name="star1" value="5" type="radio" class="star"/> 
          </div>
         </td>
    <tr>

The ajax call - This is the attempted call to the page where I am sending the request, but how can I include the comments and user id on this call?

  $('.star').rating({
        callback: function(value, link) {
           var name = $(this).attr('name');
           $.ajax({
                url: "ajax.php",
                data: "name=" + name + "&value=" + value,
                cache: false,
                success: function(response) {
                    try {
                        console.log(response);
                    } catch (err) {
                        alert(response);
                    }
                }
            });
        }
    });

Now, ajax.php has variables $passed_user_id, $passed_comments, $passed_ratingval. How am I retrieving these values when the call is triggered in php? something like

$passed_comments = //get the value being passed from ajax call
$passed_ratingval = //get the value being passed for the rating value
$passed_user_id = //get the value being passed for the user_id`

I do have all set up, the insert query, connection everything works. I'm just not sure how to make this work with the ajax call.

Answer 1

Kinda hacky, but this will work for you. It also will allow for multiple ratings on one page (which I assume you might be doing considering the TR).

HTML:

<tr>
  <td style="padding:10px;">
    <input type="hidden" name="userID" value="<?php echo $user_id ?>">
    <span style="font-size: 20px; vertical-align:top;">Comments</span>
  </td>
  <td style="padding:10px;">
    <textarea name="comments" cols="60" rows="2"></textarea>
  </td>
  <td>
    <div>
      <input name="star1" value "1" type="radio" class="star"/>
      <input name="star1" value="2" type="radio" class="star"/>
      <input name="star1" value="3" type="radio" class="star"/>
      <input name="star1" value="4" type="radio" class="star"/>
      <input name="star1" value="5" type="radio" class="star"/> 
    </div>
  </td>
<tr>

JS:

$('.star').rating({
  callback: function(value, link) {
    var name = $(this).attr('name');
    var userID = $(this).closest('tr').find('input[name="userID"]').val();
    var comments = $(this).closest('tr').find('textarea[name="comments"]').val();
    $.ajax({
      url: "ajax.php",
      data: "name=" + name + "&value=" + value + "&userID=" + userID + "&comments=" + comments,
      cache: false,
      success: function(response) {
        try {
          console.log(response);
        } catch (err) {
          alert(response);
        }
      }
    });
  }
});

Also, if you use POST instead of GET, you can format your ajax call a bit nicer like below. Remember to use $_POST[] in your ajax.php file.

$('.star').rating({
  callback: function(value, link) {
    var name = $(this).attr('name');
    var userID = $(this).closest('tr').find('input[name="userID"]').val();
    var comments = $(this).closest('tr').find('textarea[name="comments"]').val();
    $.ajax({
      url: "ajax.php",
      type: "POST",
      data: {
        name: name,
        value: value,
        userID: userID,
        comments: comments
      },
      cache: false,
      success: function(response) {
        try {
          console.log(response);
        } catch (err) {
          alert(response);
        }
      }
    });
  }
});

Answer 2

Here is example code of mine, which I use on one project:

    jQuery.post("load.php", {
            op_type : opType,
            xor : xor.toString(),
            or : or.toString(),
            and : and.toString(),
            from : seeds.toString(),
            last_id : jQuery("input[type=hidden]:last").val(),
            last_update : last_update_time
        }, function(data) {
            var json = jQuery.parseJSON(data);
            if (json.list.length > 0) {
                last_update_time = Math.floor(new Date().getTime() / 1000);
                jQuery("div#list_content ul.no-list").append(json.list);
            }
        });

And in PHP to receive data I use:

$_POST['op_type']

and in this manner I get other variables too. To return something I do like this:

  echo json_encode(array("list"=>$html));

So afyer jQuery parses JSON it can get access to $html variable via list property.

So what you need is to specify request type in jQuery and get that request type in PHP. Sending data in JSON is one of the options. jQuery and PHP also support XML, but I didn't worked with it.