Unable POST to my API with AJAX & jQuery
Question
I am new to jQuery and javascript and am really having a hard time to POST and GET to my API. I am able to POST fine when I did a curl request over git bash command line but can't do it over JS and jQuery. It also is unable to populate on my main HTML page. Below is the code I have for my form:
<h2>My Lists:</h2>
<ul id="orders"></ul>
<h3>Add Restaurant</h3>
<form action="" method="POST">
<p>
restaurant name:
<input type="text" id="name">
</p>
<input id="add-rest" type="submit" value="submit">
</form>
<script src="jquery-1.12.1.min.js"></script>
<script src="script.js" type="application/javascript"></script>
$(function(){
var $orders = $('#orders');
var $name = $('#name');
$.ajax({
type: 'GET',
url: 'http://testing-sh1.appspot.com/restaurant',
success: function(orders){
$.each(orders, function(i, order){
$orders.append('<li>name: ' + order.name + '</li>');
});
}
});
});
$('#add-rest').on('submit', function(){
var order = {
name: $name.val(),
};
$.ajax({
type: 'POST',
url: 'http://testing-sh1.appspot.com/restaurant',
data: order,
success: function(newOrder){
$orders.append('<li>name: ' + newOrder.name + '</li>');
}
});
});
I have my live API URL there just for testing. Hopefully a second set of eyes can help me out. Thanks guys for your help.
4 answers
solution1
1 2016-03-10 08:05:11
You have a typo, in
var order = {
name: $name.val(),
};
Remove the tailing , to make it a valid object.
I got this response with 'test'
{"reviews": [], "name": "test", "key": 5649391675244544}
I tested the AJAX directly.
Also make sure that the variables are passed correctly and that they are defined in their respective function's scope. Like with your current code, var $name = $('#name'); $name won't be accessible in your submit's handler since it's local to another function with a different scope.
You'll also need to prevent the default behavior of form submit since you are handling the event via a custom AJAX call.
solution2
0 2016-03-10 08:04:42
You have an Error in your server Im just make a API call
<html>
<head>
<title>Internal Server Error</title>
<style>
body {
padding: 20px;
font-family: arial, sans-serif;
font-size: 14px;
}
pre {
background: #F2F2F2;
padding: 10px;
}
</style>
</head>
<body>
<h1>Internal Server Error</h1>
<p>The server has either erred or is incapable of performing
the requested operation.</p>
<pre>Traceback (most recent call last):
File "/base/data/home/runtimes/python27/python27_lib/versions/third_party/webapp2-2.5.2/webapp2.py", line 1535, in __call__
rv = self.handle_exception(request, response, e)
File "/base/data/home/runtimes/python27/python27_lib/versions/third_party/webapp2-2.5.2/webapp2.py", line 1529, in __call__
rv = self.router.dispatch(request, response)
File "/base/data/home/runtimes/python27/python27_lib/versions/third_party/webapp2-2.5.2/webapp2.py", line 1278, in default_dispatcher
return route.handler_adapter(request, response)
File "/base/data/home/runtimes/python27/python27_lib/versions/third_party/webapp2-2.5.2/webapp2.py", line 1102, in __call__
return handler.dispatch()
File "/base/data/home/runtimes/python27/python27_lib/versions/third_party/webapp2-2.5.2/webapp2.py", line 572, in dispatch
return self.handle_exception(e, self.app.debug)
File "/base/data/home/runtimes/python27/python27_lib/versions/third_party/webapp2-2.5.2/webapp2.py", line 570, in dispatch
return method(*args, **kwargs)
File "/base/data/home/apps/s~testing-sh1/1.391270213179374270/restaurant.py", line 29, in post
key = new_restaurant.put()
File "/base/data/home/runtimes/python27/python27_lib/versions/1/google/appengine/ext/ndb/model.py", line 3451, in _put
return self._put_async(**ctx_options).get_result()
File "/base/data/home/runtimes/python27/python27_lib/versions/1/google/appengine/ext/ndb/tasklets.py", line 342, in get_result
self.check_success()
File "/base/data/home/runtimes/python27/python27_lib/versions/1/google/appengine/ext/ndb/tasklets.py", line 386, in _help_tasklet_along
value = gen.throw(exc.__class__, exc, tb)
File "/base/data/home/runtimes/python27/python27_lib/versions/1/google/appengine/ext/ndb/context.py", line 824, in put
key = yield self._put_batcher.add(entity, options)
File "/base/data/home/runtimes/python27/python27_lib/versions/1/google/appengine/ext/ndb/tasklets.py", line 389, in _help_tasklet_along
value = gen.send(val)
File "/base/data/home/runtimes/python27/python27_lib/versions/1/google/appengine/ext/ndb/context.py", line 358, in _put_tasklet
keys = yield self._conn.async_put(options, datastore_entities)
File "/base/data/home/runtimes/python27/python27_lib/versions/1/google/appengine/datastore/datastore_rpc.py", line 1852, in async_put
pbs = [entity_to_pb(entity) for entity in entities]
File "/base/data/home/runtimes/python27/python27_lib/versions/1/google/appengine/ext/ndb/model.py", line 697, in entity_to_pb
pb = ent._to_pb()
File "/base/data/home/runtimes/python27/python27_lib/versions/1/google/appengine/ext/ndb/model.py", line 3158, in _to_pb
self._check_initialized()
File "/base/data/home/runtimes/python27/python27_lib/versions/1/google/appengine/ext/ndb/model.py", line 3014, in _check_initialized
'Entity has uninitialized properties: %s' % ', '.join(baddies))
BadValueError: Entity has uninitialized properties: name
</pre>
</body>
</html>
Now Im send a name, and response is
{
"reviews": [0]
"name": "testing"
"key": 5722646637445120
}
You need to change this part from your ajax call`
var order = $name.val();
$.ajax({
type: 'POST',
url: 'http://testing-sh1.appspot.com/restaurant',
data: {name:order},
success: function(newOrder){
$orders.append('<li>name: ' + newOrder.name + '</li>');
}
});
solution3
0 2016-03-10 08:20:26
The response you are getting is in string, change it to an object and also when using ajax try to avoid form
And also declare global variables outside function
<h2>My Lists:</h2>
<ul id="orders"></ul>
<h3>Add Restaurant</h3>
<div>
<p>
restaurant name:
<input type="text" id="name">
</p>
<input id="add-rest" type="submit" value="submit">
</div>
<script type="text/javascript" src="../myspace/js/jquery-1.9.1.min.js"></script>
<script>
var $orders = $('#orders');
var $name = $('#name');
$(function(){
$.ajax({
type: 'GET',
url: 'http://testing-sh1.appspot.com/restaurant',
success: function(orders){
orders = JSON.parse(orders);
for (var key in orders) {
var obj = orders[key];
for (var prop in obj) {
//do your append code here
}
}
/*$.each(orders, function(i, order){
$orders.append('<li>name: ' + order.name + '</li>');
});*/
}
});
});
$('#add-rest').on('click', function(){
var order = {
name: $name.val(),
};
$.ajax({
type: 'POST',
url: 'http://testing-sh1.appspot.com/restaurant',
data: order,
success: function(newOrder){
newOrder = JSON.parse(newOrder);
$orders.append('<li>name: ' + newOrder.name +', password: '+ newOrder.password + '</li>');
}
});
});
</script>
solution4
0 2016-03-10 08:27:26
Just a thought on CORS, you can check with this post, but most of the time you already know because you had to set up the server to support: Detect browser support for cross-domain XMLHttpRequests? Did you set up the server?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.