3

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>

le

Improve this question

2 Answers 2

Reset to default
1

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); } });
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Making the modification still didn't send the JSON data type to the server and trigger the right response. Thanks for helping out by the way.
No I did not, I'm still going through it. It's been puzzling me. So I know that if I use the absolute URL and post to said url "/order" it will post a 405.
url: "/order" what is /order is order a function ?
/order is a GET/POST method. When retrieved as a GET, it should return a page that allows user input. Then, when triggering a POST, it should submit the data then direct to a new page.
Hello, first off thank you, and second of all I'm almost there, I get this error: SyntaxError: Unexpected token < in JSON at position 1 at JSON.parse (<anonymous>) at n.parseJSON (jquery.min.js:4) at Xb (jquery.min.js:4) at y (jquery.min.js:4) at XMLHttpRequest.c (jquery.min.js:4)
|
1

Just change your dataType:"text/html; charset=utf-8" todataType:json

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.