create jquery array for ajax post

Question

How can I convert the output of drp.getDateRange to an array so that I can post it via AJAX?

I have updated this code to represent the advice given below

<script>
    var drp;
    var myArray = [];
    function makedatepicker() {
        drp = $("#myDate").datepicker({});
    }
    function getRange() {
        var data = $("#myOutput").serialize();
        console.log("This is the serialized element");
        console.dir(data);

        $.ajax({
          url: "myurl.com",
          type: 'post',
          data: data,
          success: function(response) {
               console.log("This is the response from your ajax script");
               console.dir(response);
          }
        });
    }
    $(document).ready(function () {
        makedatepicker();
    });
</script>

Just read some documentation, and drp.getDateRange() actually returns an array. How can i show that in an alert to see that it's working correctly? — Gavin5511
– Gavin5511, Commented Jun 16, 2015 at 12:25
You can debug the array with chrome dev tools or you can iterate trough it: for( var key in array ) console.log(key + ': ' + array[key]);. It's more effective than an alert. — kosmos
– kosmos, Commented Jun 16, 2015 at 12:27

Tech Savant · Accepted Answer · 2015-06-17 09:54:55Z

2

Update

Note on JSON. The default encoding will be url form encoded. If you want the request to send the data as JSON, you will need to add..

content-type: "application/json; charset=utf-8",

also if you are returning JSON, you should add ...

 datatype : "json",

Not sure which scripting language your using on the back end, but if PHP, you can send back array data like this

echo json_encode($myArray);

I will add the JSON stuff to the sample code below.

End Update

If you use .serialize() you an send it as ajax data and it will show up in your post or get array.

If you are working with an array, you might want to use .serializeArray()

You can view an object or array in your developer tools (F12 in Chrome or FF), by using console.dir(someObject);

var data = $("#myOutput").serialize();
console.log("This is the serialized element");
console.dir(data);

$.ajax({
  url: "myurl.com",
  type: 'post',
  datatype : "json",
  contentType: "application/json; charset=utf-8",
  data : JSON.stringify(data),
  beforeSend : function (){
            console.log("Before Send: Data looks like..");
            console.dir(data);
  },
  success: function(response) {
       console.log("This is the response from your ajax script");
       console.dir(response);
       console.log("parsing JSON ...");
       console.dir($.parseJSON(response));
  }
});

Chrome Developer Tools Console, this is where you will see anything that you console.log or console.dir

enter image description here

You can check the JSON that is being sent by clicking the Network tab. Then click the name of the ajax script and it will show you the data being sent. (Also, clicking on the "response" tab will show you what is being sent back by your script.)

In the example below I am sending an ajax request using the above code and it is showing that the data is indeed a JSON object.

enter image description here

edited Jun 17, 2015 at 9:54

answered Jun 16, 2015 at 12:51

Tech Savant

3,7671 gold badge21 silver badges40 bronze badges

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

7 Comments

Gavin5511 Over a year ago

I've tried your suggested (edited about) but i am getting an error in the console.

Gavin5511 Over a year ago

Uncaught ReferenceError: conosole is not definedCalendarUpdate.cshtml:273 getRangeCalendarUpdate.cshtml:133 onclick

kosmos Over a year ago

I think conosole is not defined because you want to mean console. There is just a little bit error in the answer .)

Tech Savant Over a year ago

@Gavin5511 Sorry it was just a typo. It's obviously supposed to be 'console' not 'conosole'

Gavin5511 Over a year ago

Thanks NotoriousPet, i missed that typo too. I've corrected it, but i'm not seeing any JSON posted to my page using fiddler still? Is the above code correct (I've edited my original post)

|

Collectives™ on Stack Overflow

create jquery array for ajax post

1 Answer 1

Update

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related