sent array with ajax causes error 400

Question

I want to send an array as data, but I get bad request error!

How can I fix it?
Does it need any code else to add?

window.csrfTokenName = "{{ craft.config.csrfTokenName|e('js') }}";
window.csrfTokenValue = "{{ craft.request.csrfToken|e('js') }}";
dataString = [ 'Location Zero', 'Location One', 'Location Two' ];

var jsonString = JSON.stringify(dataString);
$.ajax({
  type: "POST",
  url: "test",
  data: {
    data: jsonString
  },
  cache: false,
  success: function() {
    alert("OK");
  },
  error: function(e) {
    console.log(e);
  },
  dataType: "json",
  contentType: "application/json"
});

There's thousands of reasons you could be getting a 400 error. Check the logs on your server to find the error message — Rory McCrossan, Aug 22 '17 at 14:36
why do you stringify dataString first?? data should be a POJO — Jeff, Aug 22 '17 at 14:38

score 1 · Answer 1 · answered Aug 22 '17 at 14:47

My first instinct tells me your URL in the AJAX method is malformed.. is "test" a directory with an index.php file?

var jsonString = JSON.stringify(dataString);

$.ajax({
  type: "POST",
  url: "test", // Should this be test.php or /test or ../test or somethign?
  data: {
    data: jsonString
  },
  cache: false,
  success: function() {
    alert("OK");
  },
  error: function(e) {
    console.log(e);
  },
  dataType: "json",
  contentType: "application/json"
});

Beingnin · Answer 2 · 2017-08-23T04:39:26.530

if @silversunhunter 's answer didn't workout try to stringify the array this way. Sent as it is. Code below

dataString = [ 'Location Zero', 'Location One', 'Location Two' ];
$.ajax({
  type: "POST",
  url: "test", // Should this be test.php or /test or ../test or somethign?
  data: JSON.stringify({ 'data': dataString }),
  cache: false,
  success: function() {
    alert("OK");
  },
  error: function(e) {
    console.log(e);
  },
  dataType: "json",
  contentType: "application/json"
});

Also make sure that your webmethod is expecting a parameter of type string[] and is named as 'data'

score 0 · Answer 3 · answered Aug 23 '17 at 06:48

should add these lines:

        dataString = [ 'Location Zero', 'Location One', 'Location Two' ];
         var ourObj = {};
         ourObj.data = dataString;

and ajax data change to this:

       data: {"points" : JSON.stringify(ourObj)},

this link was helpful! http://www.coderslexicon.com/easy-way-to-post-multiple-javascript-values-to-php-using-jquery-ajax/

sent array with ajax causes error 400

3 Answers3