Content Type Fails to send to Server through AJAX Post - Twitter bootstrap

user1449249
May 28, 2017
91 views
0 votes
2 Answers

I’m having trouble posting JSON to a server as AJAX somehow abandon’s the content type.[Using this library][1] as well as Jquery and Bootstrap I found the problem:

Curl works for the post and retrieves success in Flask app when content is JSON.
After multiple methods and ways, post works into the app but the ContentType fails to travel with the JSON
Tried multiple ways to format the JSON and regardless content type is not recognized.
Use

Here is the AJAX code:

var items;

$('#orderform').on('submit',function () {
    console.log(items);
    $.ajax({
        url: "/order",
        type: "POST",
        data: JSON.stringify({"order": '555'}),
        contentType: "application/json; charset=utf-8",
        dataType: "text/html; charset=utf-8",
        success: function(result) {
        var data = "Check";
        }
    });

Edit: This is the content type:
application/x-www-form-urlencoded

Edit 2: Using the absolute path for the webpage as the URL I find out that it receives a 405 not assigning the content header when posting back to the sever.

Edit 3: Here’s the JSFiddle:

var order;
var adjustment;

var group = $("ol.simple_with_animation").sortable({
  group: 'simple_with_animation',
  pullPlaceholder: false,
  // animation on drop
  onDrop: function($item, container, _super) {

    var $clonedItem = $('<li/>').css({
      height: 0
    });
    $item.before($clonedItem);
    $clonedItem.animate({
      'height': $item.height()
    });

    $item.animate($clonedItem.position(), function() {
      $clonedItem.detach();
      _super($item, container);
    });
    var data = group.sortable("serialize").get();
    order = data[1];
    console.log(order);
  },

  // set $item relative to cursor position
  onDragStart: function($item, container, _super) {
    var offset = $item.offset(),
      pointer = container.rootGroup.pointer;

    adjustment = {
      left: pointer.left - offset.left,
      top: pointer.top - offset.top
    };

    _super($item, container);
  },
  onDrag: function($item, position) {
    $item.css({
      left: position.left - adjustment.left,
      top: position.top - adjustment.top
    });
  },
  serialize: function(parent, children, isContainer) {
    return isContainer ? children.join() : parent.text();
  },
  tolerance: 6,
  distance: 10
});

$(document).ready(function() {

  $(':button').on('click', function() {
    console.log(order);
    $.ajax({
      url: "http://ec2-54-244-61-189.us-west-2.compute.amazonaws.com/order",
      type: "POST",
      cache: false,
      dataType: "json",
      contentType: "application/json; charset=utf-8",
      data: JSON.stringify({
        "info": order
      }),
      async: false,
      success: function(result) {
        window.location.href = result.redirect;
      },
      error: function(xhr, status, error) {
        var err = eval("(" + xhr.responseText + ")");
        alert(err.Message);
      }
    });
  }); //END mybutton click

}); //END document.read

body.dragging,
body.dragging * {
  cursor: move !important;
}

.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}

ol.simple_with_animation li.placeholder {
  position: relative;
  /** More li styles **/
}

ol.simple_with_animation li.placeholder:before {
  position: absolute;
  /** Define arrowhead **/
}

#GamblerOrderSource,
#GamblerOrderTarget {
  min-height: 50px;
  margin: 0px 25px 10px 0px;
  padding: 2px;
  border-width: 1px;
  border-style: solid;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  list-style-type: none;
  list-style-position: inside;
}

#GamblerOrderSource {
  border: 2px dashed #f8e0b1 !important;
  background-color: #fefcf5 !important;
}

#GamblerOrderTarget {
  border: 2px dashed #add38d !important;
  background-color: #f6fbf4 !important;
}

#GamblerOrderSource li {
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  color: #c09853;
}

#GamblerOrderTarget li {
  background-color: #ebf5e6;
  border: 1px solid #d6e9c6;
  color: #468847;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<form id="orderform" method='POST'>
  <div id='GamblerOrderSource'>
    <ol class='simple_with_animation'>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
  </div>
  <div id='GamblerOrderTarget'>
    <ol class='simple_with_animation'>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
  </div>
  <input type="submit" value="Continue" />
</form>

Answers

- OwaisAslam
- May 28, 2017 at 7:55 am
- 0 votes
0
Use dataType: 'json' to send json data. You are not sending json data on server. you need to change dataType to send json data

Try use this ajax code, no need to stringify json object if its already correct object. i have tested it at my side hopefully it will help you.
```
$.ajax({
 type:"POST",
 url: "YOUR PATH TO FILE OR METHOD",
 data:{
  order:'555'
 },
 dataType: 'json',
  success: function(data){
    if(data['success']=='true'){
     echo 'success';
    }else{
    if(data['success']=='false'){
     echo 'not success';
    }
   }
  }, 
  error: function(xhr, status, error) {
   console.log(status);
   console.log(error);
  }
});
```
Login or Signup to reply.