I am having some trouble fetching a collection. I'm using the console's network inspector to see if I can figure out what's wrong and the only thing I see is the format of the Request Payload.
When making a .fetch() the Request Payload is being sent in this format:
query=this+is+my+query
This returns a 400 Bad Request status from my server. I have tested using:
$.ajax({
contentType: 'application/json',
async : false,
type:'POST',
url: '/search',
data: JSON.stringify({"query":"this is my query"}),
dataType: 'json',
success: function(data) {
alert('yup');
},
error: function(data) {
alert('nope');
}});
which returns my data as expected. In this case the Request Payload is in this format:
{"query":"enterprise search is gonna rock","scope":null}
I've tried passing in headers with my fetch:
my_results.fetch({data:{"query":"this is my query"}, type: 'POST', dataType: 'json', contentType: 'application/json'});
Here is what my Model and Collection look like:
EnterpriseSearch.Result = Backbone.Model.extend();
EnterpriseSearch.Results = Backbone.Collection.extend({
model: EnterpriseSearch.Result,
url: "/search"
});
Any help would be appreciated.
Try using data: JSON.stringify({"query":"this is my query"}) in your fetch options, just like you do when using $.ajax. jQuery will default to application/x-www-form-urlencoded for form data.
Related
I am working on a small web application which simplifies the process of creating and populating USPTO IDS forms by accessing data from another server. For accessing data I am using this API - http://ops.epo.org/3.1/rest-services/published-data/publication/epodoc/US9623902/biblio.js.
I am doing this with angular and hence I used $http but it is throwing error 500 (Internal Server Error). while doing it with ajax-request, its working fine. In fact any other method like $.get() instead of ajax throwing the same error, even I used ng-resource get method but no help. I am not getting what I am doing wrong.
Here are my codes -
$.get( "http://ops.epo.org/3.1/rest-services/published-data/publication/epodoc/US9623902/biblio.js",
function( data ) {
vm.inventors = data['ops:world-patent-data']['exchange-documents']['exchange-document']['bibliographic-data']['parties']['inventors']['inventor'];
console.log(vm.inventors);
});
var req = {
method: 'GET',
url: 'http://ops.epo.org/3.1/rest-services/published-data/publication/epodoc/US9623902/full-cycle.js',
};
$http(req).then(function(response){
console.log(response);
}, function(response){
console.log(response);
});
Both of these codes are throwing error 500. Here is the image
while this code is working fine. But here I am getting an issue of page load, the page is loaded before data is bound to $scope and hence not showing on the page.
$.ajax({
url: 'http://ops.epo.org/3.1/rest-services/published-data/publication/epodoc/' + 'US9623902' + '/biblio.js',
type: 'GET',
dataType: "jsonP",
success: function(data) {
vm.inventors = data['ops:world-patent-data']['exchange-documents']['exchange-document']['bibliographic-data']['parties']['inventors']['inventor'];
console.log(vm.inventors);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
vm.errorContent = [{
heading: "Error",
description: "Could not load json data "
}];
return false;
}
});
Image of successful result
Any help would be appreciated. Thank you.
if you are using x-www-form-urlencoded as header, you might need to transform your request.
var req = {
method: 'GET',
url: 'http://ops.epo.org/3.1/rest-services/published-data/publication/epodoc/US9623902/full-cycle.js',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
transformRequest: function(obj) {
var str = [];
for(var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
},
};
I didn't get where the problem lies in my "GET" request. But "jsonP" method of $http did solve this issue.
#Sachila - As data is not being sent, the transformation is not required.
My code is as the following:
var response = $http({
method: 'post',
withCredentials: true,
dataType: "json",
data: JSON.stringify(payload),
headers: {
'Content-Type': 'application/json; charset=utf-8',
},
url: url
});
where payload looks like this:
{"CASEID":3,"CASENUMBER":"ANY ","TITLE":"ANY "}
Backend code:
public CL_CASE Post([FromBody]CL_CASE value)
{....
When running it as it's shown value is null.
If I change headers to 'Content-Type': 'application/x-www-form-urlencoded' then I do get value but with properties equal to null/0 . What am I doing wrong?
Thanks
You don't need to call JSON.stringify. This results in sending a string to the server, not an object. And since the WebAPI model binder is expecting a CL_CASE object, it has no way to populate that object from just a string.
Simply send the object itself:
data: payload
To be honest, I don't think you need the headers option at all in this case either. Let the default functionality handle it:
$http({
method: 'post',
withCredentials: true,
dataType: 'json',
data: payload,
url: url
})
On the server side I have a method that accepts an array of integers and returns a Json object:
public JsonResult GetCorrespondingOfficers(int[] categories){
//use `categories`
return Json(model,JsonRequestBehavior.AllowGet);
}
And I have the following script on the client:
var categories=[1,2,3];
$.ajax({
url: url,
type: 'GET',
data: { categories: categories },
contentType: 'application/json; charset=UTF-8',
dataType: 'json',
success: function (data) { alert('Success');},
async: false
});
When I run the above code I get null for the parameter categories on the server side. If I change the method from GET to POST, then it works. Does it mean that I can't send an array or any Json data with GET request? If not, then what's the problem with my code?
You can send array as a string:
...
data: { categories: JSON.stringify(categories) },
...
GET request does not have message body, so you can't use GET with contentType: 'application/json; charset=UTF-8'. When you use json in GET request, browser breaks your json and append each josn key value to the url(even if you use JSON.stringify method). Therefore for using json and REST you need to use POST method.
I'm attempting add an edge to my Titan Server 0.4.4 graph using an AngularJS resource. The resource looks like this:
'use strict';
angular.module('storymapApp').factory('edgeResource', function ($resource) {
var EdgeResource = $resource('http://localhost:8182/graphs/graph/edges?_outV=:outId&label=:label&_inV=:inId', {outId: "#outId", inId: "#inId", label: "#label"}, {
update: {method: 'PUT', isArray: false},
outedge: {method: 'POST',
transformResponse: function(data, headers){
// deserialize the JSON response string
data = angular.fromJson(data);
data = data.results;
return data;
},
isArray: true}
});
return EdgeResource;
});
This code generates a POST like this:
http://localhost:8182/graphs/graph/edges?_outV=120028&label=contains&_inV=160076
which returns the following 500 error message:
{"message":"An error occurred while generating the response object","error":"Edge cannot be found or created. Please check the format of the request."}
Where is the formatting issue in the request?
Can you change your angularjs code to POST the request as JSON (instead of formatting the parameters to query string)? Set your Content-Type to application/json as well (though angular may be doing that for you already. Those things should fix your problem.
New to Sencha, I am using the following code to try to get JSON data. For some reason, it returns null, yet I know the URL is returning values, as I am using it in another project.
// Make the JsonP request
Ext.data.JsonP.request({
url: 'http://xxx.azurewebsites.net/login',
crossDomain: true,
type: "GET",
dataType: "json",
callbackKey: 'jsoncallback',
callback: function(successful, data ) {
alert( JSON.stringify(data) );
}
});
Can someone please point out what I am missing.
You need to add scope:this property to call callback function, try like this.
Ext.data.JsonP.request({
url: 'http://xxx.azurewebsites.net/login',
crossDomain: true,
type: "GET",
dataType: "json",
callbackKey: 'callback',
scope: this,
callback: function (response, value, request) {
var result = Ext.decode(response.responseText);
alert(result.propertyName);
}
});