CODEWITHSUNDEEP
jqueryajaxpost
Maitreyee Tewari
Maitreyee Tewari

Reputation: 99

Ajax POST method returning null value?

Here is the code I am trying to run. 

$(document).ready(function(){
    $("#btn1").click(function(){
        $.ajax({
            url:'http://sensecan.org/wisekar/api/resource.php/resource     /event?key=ma5Tfkp3ajZKPoP746sDCHdd7144&nodeId=8078&typeId=4&status=74,52',
            dataType: 'json',
            type: 'POST',
            crossDomain:true,
            contentType: 'application/json',
            data: { }, 
            success: function(data){
                console.log(data); 
                document.getElementById("two").innerHTML = data.result.wEventId;
            },
            failure: function(errMsg) { 
                console.log(errMsg);
            }
            var myData = data;
            myData= new Array;       
        });
    });
});

It is not returning any error message, neither seems to work. This is my first POST method so spare me, if I am doing anything wrong. I have also included the website link on which I am trying to do this. Thanks in advance. I have also created the html page on which I have to display the data. and the code is below.

<!DOCTYPE html>
<html>
    <head>
        <title>POST API</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
        <script type="text/javascript" src="post.js"></script>
        <script type="text/javascript" src="get.js"></script>
    </head>
    <body>
       <div>
           <button id="btn1">Check HTTP POST</button>
           <p> Display sample output from POST API: </p>
           <p id="one" >wEventId : </p>
           <p id="two"> </p>
        </div>
        <div>
           <button id="btn2">Get Data</button></br>
           <p id="seven" /></br>    
           <p id="eight" /></br>    
           <p id="three" /></br>
           <p id="four" /></br>
           <p id="five" /></br>
           <p id="six" />
        </div>
   </body>
</html>

I had also created a get request which is working perfectly fine.

Upvotes: 0

Views: 4332

Answers (3)

kenoly
kenoly

Reputation: 121

Your "data" key in ajax script in post.js is empty. Try Passing a value like data: {"key" : "value"}

Upvotes: 1

Maitreyee Tewari
Maitreyee Tewari

Reputation: 99

Here is the solution that I had found out. Below is the get.js

    $(document).ready(function(){
$("button").click(function()
{
    var myData= new Array();
    var myJSON;

  $.get("http://sensecan.org/wisekar/api/resource.php/resource/datasets.json?key=ma5Tfkp3ajZKPoP746sDCHdd7144&datasetId=29&typeId=11",
    function(data, status){
        crossDomain: true;
        myData = data;
        //alert("Data: " + data +"\nStatus: " + status);            
        myJSON = JSON.parse(data);          
        //console.log(myJSON[0].datasetName);
        document.getElementById("seven").innerHTML =myJSON[0].datasetId;
        document.getElementById("eight").innerHTML =myJSON[0].datasetName;
        document.getElementById("three").innerHTML =myJSON[0].datasetSource;
        document.getElementById("four").innerHTML =myJSON[0].contributor;
        document.getElementById("five").innerHTML =myJSON[0].addedOn;
        document.getElementById("six").innerHTML =myJSON[0].updatedOn;
    });
});

});

The post.js is below.

    $(document).ready(function(){

            $("#btn1").click(function(){

               $.ajax({

    url:'http://sensecan.org/wisekar/api/resource.php/resource/event?key=ma5Tfkp3ajZKPoP746sDCHdd7144&nodeId=8078&typeId=11&status=74,52',

                    dataType: 'json',

                    type: 'POST',

           crossDomain:'true',

           contentType: 'application/json',

                data: { }, 

  success: function(data){

    console.log(data); 

    document.getElementById("two").innerHTML = data.result.wEventId;

            },

        failure: function(errMsg){ 

                    console.log(errMsg);

                           }

 var myData = data;

     myData= new Array;


                  });

          });

    });

And here is the html file

    <!DOCTYPE html>

    <html>

    <head>

       <title>POST API</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

    <script type="text/javascript" src="post.js"></script>

    <script type="text/javascript" src="get.js"></script>

    </head>

    <body>


        <div>

                    <button id="btn1">Check HTTP POST</button>

                    <p> Display sample output from POST API: </p>

                    <p id="one" >wEventId : </p>

                    <p id="two"> </p>

        </div>


         <div>

                   <button id="btn2">Get Data</button>

     <p id="seven"></p> 

             <p id="eight" ></p>    

             <p id="three" ></p>    
             <p id="four" ></p> 
             <p id="five"></p>

              <p id="six"></p>


      </div>


   </body>

   </html>

Upvotes: 0

Julo0sS
Julo0sS

Reputation: 2102

Why is your variable "myData" into your $.ajax block...?

Your javascript code should look like this, and btw, add some console logs into the blocks to check where you're going, like this : 

    $(document).ready(function(){
        $("#btn1").click(function(){
            console.log('launch click function!');
            $.ajax({
                url:'http://sensecan.org/wisekar/api/resource.php/resource     /event?key=ma5Tfkp3ajZKPoP746sDCHdd7144&nodeId=8078&typeId=4&status=74,52',
                dataType: 'json',
                type: 'POST',
                crossDomain:true,
                contentType: 'application/json',
                data: {"someData":"some data"}, 
                success: function(data){
                    console.log('AJAX SUCCESS, data : '+data); 
                    document.getElementById("two").innerHTML = data.result.wEventId;
                },
                error: function(errMsg){ 
                    console.log('AJAX FAILED, message : '+errMsg);
                }
            });
           console.log('MYDATA VAR DECLARATION');
           var myData = data;
           myData= new Array;
       });
   });

Hope it helps

Upvotes: 0

Related Questions