Sending a javascript variable to a PHP script using jQuery Ajax

Question

I'm trying to send a JavaScript variable to a php script using ajax. This is my first time using ajax and I don't know where I went wrong. Here's my code

function selectcat(v) {
        $.ajax({

        type: "GET",
        url: "myurl.php",
        dataType: "script",
        data: { "selected_category" :  v}
    }).done(function() { 
    window.location.href = "http://mywebsite.com";

    });
        }

All help is appreciated

Here's the HTML

<ul class="cat">
<li class="opt" onclick="selectcat('option1')">option1</li>
<li class="opt" onclick="selectcat('option2')">Option 2</li>

</ul>

This is the ajax php file

<?php
session_start();
$ctgry = $_GET['selected_category'];
$_SESSION['select_cat'] = $ctgry;
?>

Answer 1

dataType: "script" has no sense here, I think you want json or leave it empty.

Your PHP script should work if you try to get the variable with $_GET['selected_category']

I suggest you this modification to help yourself for debugging

$.ajax({
    type: "GET",
    url: "myurl.php",
    data: { "selected_category" :  v},
    success: function(data){
      console.log(data);
      // you can also do redirection here (or in complete below)
    },
    complete: function(data){
      // when request is done, independent of success or error.
    },
    error: function(data){
      // display things to the user
      console.error(data);
    }
})

Answer 2

AJAX is easier than it sounds. You just need to see a few good examples.

Try these:

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

---

The above examples demonstrate a few things:

(1) There are four formats for an AJAX request - the full $.ajax() structure, and three shortcut structures ($.post(), $.get(), and $.load() )

Until you are pretty good at AJAX, I suggest using a correctly formatted $.ajax() code block, which is what the above examples demonstrate. Such a code block looks like this:

$('#divID').click({
    $.ajax({
        type: 'post',
         url: 'contact.php', 
    dataType: 'json',
        data: 'email=' + form.email.value
    }).done(function(data) {
        if ( typeof(data) == 'object' ) {
            if ( data.status == 'valid') {
                form.submit();
            } else if(data.status !=='valid' {     
                alert('The e-mail address entered is wrong.');
                return false;
            } else {
                alert('Failed to connect to the server.');
                return false;
            }
        }
    });
});

(2) In an $.ajax() code block, the data: line specifies the data that is sent to the PHP processor file.

(3) The dataType: line specifies the type of data that the ajax code block expects to receive back from the PHP processor file. The default dataType is html, unless otherwise specified.

(4) In the PHP processor file, data is returned to the AJAX code block via the echo command. Whether that data is returned as html, text, or json, it is echoed back to the AJAX routine, like this:

<?php

//perform MySQL search here. For eg, get array $result with: $result['firstname'] and $result['lastname']

$out =  '<div id="myresponse">';
$out .= 'First Name: <input type="text" value="' .$result['firstname']. '" />';
$out .= 'Last Name: <input type="text" value="' .$result['lastname']. '" />';
$out .= '</div>';

echo $out;

Please try a couple of the above examples for yourself and you will see how it works.

It is not necessary to use json to send/return data. However, json is a useful format to send array data, but as you can see, you can construct a full html response on the PHP side and echo back the finished markup.

---

So, you just need to echo back some data. It is the job of the PHP file to:

(1) receive the data from the AJAX routine,

(2) Use that data in a look up of some kind (usually in a database),

(3) Construct a response, and

(4) echo (NOT return) the response back to the AJAX routine's success: or .done() functions.

---

Your example could be changed to look something like:

HTML:

<ul class="cat">
    <li class="opt" value="TheFirstOption">option1</li>
    <li class="opt" value="The Second Option">Option 2</li>
</ul>

javascript/jQuery:

$('.opt').click(function(){
    var v = $(this).val();
    $.ajax({
        type: "POST",
        url: "myurl.php",
        dataType: "html",
        data: { "selected_category" :  v}
    }).done(function(data) { 
        $('#div_to_insert_the_response').html(data);
    });
});

PHP:

<?php
    $val = $_POST['selected_category'];
    echo 'You selected: ' . $val;

Answer 3

Hi this is what I do to call an ajax request You can post data or load a file using following code:

 $("#button click or any other event").click(function(){
try
  {
    $.post("my php page address",
      {
         'Status':'6',
         'var one':$("#myid or .class").val().trim(),
         'var 2':'var 2'
     }, function(data){
           data=data.trim();
      //   alert(data);
// this  data is data that the server sends back in case of ajax request you 
//can send any type of data whether json or or json array or any other type 
//of data

         });
    }
    catch(ex)
    {
        alert(ex);
    }
  });

I hope this help!

Answer 4

You need to remove dataType: "script" since you are just sending data. Do it like this:

 function selectcat(v) {
        $.ajax({
            type: "GET",
            url: "myurl.php",
            data: {"selected_category": v}
        }).done(function(result) {
            console.log(result);
            //window.location.href = "http://mywebsite.com";
        });
 }