How to send data using jquery ajax method

Question

I am a novice to ajax and want to know how to send data using jquery ajax method, any help will really be appreciated. This is my code:

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>
    <script>
        function show(str){
            $(document).ready(function(){
                $("#games").change(function(){
                    valcc = $("#games").val();
                    $("#div1").load("gg.php");
                });
            });
        }
    </script>
</head>

<body>
    <select id="games" name="games" onchange="show(this.value)">
        <option value="cricket">cricket</option>
        <option value="soccer">soccer</option>
        <option value="chess">chess</option>
    </select>
    <input type="button" name="button" value="button" id="button" />
    <div id="dd">Please select a Game</div>
    <div id="div1" style="width:300px; height:200px; border:1px solid  #999;"></div>

I need to send the value of select option to the gg.php page and then procees it. Please help

$("#div1").load("gg.php?valcc="+valcc);? And then use $_GET['valcc'] in gg.php page — asprin
– asprin, Commented May 28, 2014 at 7:27

Jenz · Accepted Answer · 2014-05-28 07:33:25Z

1

Call this function onchange of the select input.

function show(str)
{
$.ajax({
        type:'post',    // the type of request POST,GET etc
        url:'gg.php',   //  url to which request is send
        datatype:'html',  // datatype like html,text,json etc
        data:'games='+str, // pass the data; if there are multiple parameters you have to append it like data:'param1='+val1+'&param2='+val2 etc
        success:function(response)  // on success get response
        {

        }
    });
}

Now you can process the data passed through the ajax in gg.php. As you are passing the data through POST, you have to access the value as

$value=$_POST['games'];  // index as the parameter name passed through ajax

Note: Whatever you echo in the gg.php will be send as response to the ajax function.

For example,

In the ajax response, alert the response.

function show(str)
{
   .............
   success:function(response)  // on success get response
    {
       alert(response);
    }
}

Now try to echo the games value in gg.php,

<?php
echo $value=$_POST['games'];
exit;
?>

Now you can understand clearly the working of ajax.

edited May 28, 2014 at 7:33

answered May 28, 2014 at 7:28

Jenz

8,3718 gold badges50 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gomzy Over a year ago

Thanks alot for your time and help, i am really honored,

gomzy Over a year ago

Right i will do it, this is my first day here so i m quite confussed

Jai · Accepted Answer · 2014-05-28 07:30:21Z

0

You don't have to put the doc ready block in a function like that and you can use $.get() ajax method to send values and get the response. Try this:

$(document).ready(function(){
   $("#games").change(function(){
       var valcc = $(this).val(); // get the current value of selected
       $.get("gg.php", {data: valcc}, function(resp){ // pass that in a object
           $("#div1").html(resp); // place the comming response html
       });
   });
});

You can takeout this inline script onchange="show(this.value)".

answered May 28, 2014 at 7:30

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Saqueib · Accepted Answer · 2014-05-28 07:34:05Z

0

As I can see you are using jQuery so its very easy

You can do something like this, first you dont need onchange="show(this.value)".

$(function(){
   $("#games").on("change", function(){
      var gameData =  $(this).val();
      $.ajax({
        type: "POST",
        url: "gg.php",
        data: { game: gameData  }
        })
    .done(function( msg ) {
        alert( "Data Saved: " + msg );
    });
   });
});

At gg.php you can get this value by $_POST['game'];

for more info on AJAX visit http://api.jquery.com/jquery.ajax/

edited May 28, 2014 at 7:34

answered May 28, 2014 at 7:28

Saqueib

3,5184 gold badges36 silver badges58 bronze badges

1 Comment

gomzy Over a year ago

Thanks a lot for the suggestions.i m glad i am here.

Collectives™ on Stack Overflow

How to send data using jquery ajax method

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related