I have Laravel back-end API which can receive info from Ionic app. The problem I'm facing is sending an array of data through POST request...
This is my method:
Injection.ResourceFactory.postResource($http, SERVER, 'order/addToBasket', {
token: localStorage.getItem('token'),
quantity: $scope.quantity.value,
product_id: $scope.productId,
condiments: [$scope.condiments]
...
and postResource method is:
postResource: function ($http, SERVER, route, parameters, data) {
return $http({
method: 'POST',
url: SERVER + route,
data: data,
params: parameters
})
},
So everything is pretty straightforward, and works locally perfect. When I transfer everything online, suddenly the condiments aren't being sent. I have tried console logging it before and after the call, and as far as Ionic is concerned, an array is being sent...but for some reason not received?
When I make Input::all() call in Laravel i get only token, quantity and product_id. If I remove the brackets from condiments: [$scope.condiments] so that I send condiments: $scope.condiments I get only last item from the JSON being sent?
I can't seem to figure this one out...ideas?
Related
I´m working on this app which will be a frontend consuming data from other applications but in first stance, it will be posting credentials to another app already running in production, and after credentials are accepted it should redirect to that app with user logged in.
Here comes the problem. I´ve already tested sending data to the other application data is being received as
params: [{"j_username":"username","j_password":"password","instance":"http:8080/TERA/authAuto"}:, action:authAuto, controller:login]
username: null
Prueba: null
I have tried to receive this as it follows all without success
request.JSON.j_username
params.j_username
params["j_username"]
The params: is actually params received by groovy being printed.
I´ll now add my angularJs code
vm.login = function(){
$http({
method: 'POST',
url: "http://t0002161750:8080/TERA/authAuto",
data: {j_username: vm.user.username, j_password: vm.user.password, instance: "http://t0002161750:8080/TERA/authAuto"},
headers:{
'Content-Type': 'application/x-www-form-urlencoded;charset=utf8'
}
}).success(function(response){
$window.location.href = "http://t0002161750:8080/TERA/";
});
}
}
Im doing this tests with a companion having the other app running on his PC.
I may be doing something wrong conceptually speaking. I know that by sending the params in the $window.location.href = url+params will work but i dont want the credentials travelling in the url. I know i can encode them but lets try something else before giving up if it is possible.
The problem here is using the wrong Content-Type for the submission. The server will look for POST-vars in the body. The proper value to use is:
Content-Type: application/json
(instead of application/x-www-form-urlencoded;charset=utf8)
I have the following scenario, a page that will show different widgets with different data, the back-end is ASp.NET Web API 2 with SQL Server and EF + Repository Pattern + Unit Of Work.
If I have to show quite some data, including user profile and other information on top of the widgets information, what will you recommend:
make one big $http.get request that will return a big json and bind that one to the UI
or
each controller (service) when it loads will make it's unique call to back-end and get's the data it needs to display, that means each widget will make a call to back-end and retrieve it's values.
I just want to know what do you recommend as a best practice.
IMHO the best way is to separate every request into single service methods that way you can reuse just a part of it and not make server calls to load to whole data, check the angular-resource $resource to have a clean reusable service of server calls and not a bunch of $https arround your code:
example:
A service that points some url of your backend server
.factory('ClientService', ['$resource', function($resource){
return $resource('http://some_url/:controller/:method', null, {
"agents": { method: 'GET', params: { controller: 'agent', method: 'search' }, cache: false },
"query": { method: 'GET', params: { controller: 'client', method: 'search' }, cache: false },
"save": { method: 'POST', params: { controller: 'client', method: 'save' } },
"delete": { method: 'POST', params: { controller: 'client', method: 'delete' } }
})
}])
The use in the controller (Injecting ClientService as dependency)
// If i want to query the agents into a scope element
// that will call the url = http://some_url/agent/search
$scope.agents = ClientService.agents();
// If i want to query a single client i cant send adtional params
// as is a get request it will call http://some_url/client/search?id=5
$scope.client = ClientService.query({id:5});
// and you can event manage callbacks if you want to
// This will send the client object to the url = http://some_url/client/save
ClientService.save($scope.client).$promise.then(function(response){ alert(response) })
As you can see this way you can access just the things you need from the backend server not having to do all the callback response if you dont need to and in a reusable cleaner way
Info Angular Resource Docs
I think it depends...
If performance might be a problem you should think about what is best for your User... Will the overhead of making 4 HTTP requests affect the user experience in anyway? Also, would a one big request take too much time to retrieve info from the database?
However if you want just to use a developer perspective of the problem, I'd prefer doing 1 generic API call then calling it 4 times in Angular with different parameters for each Widget.
It is likely that making 4 requests will actually be faster. Not to mention the data can start being populated on the screen as it comes back, instead of needing to wait for the slowest service.
For the max number of concurrent AJAX requehttp://www.coderanch.com/t/631345/blogs/Maximum-concurrent-connection-domain-browsers
I had been searching for this same issue here, I found something but all that seems to not be working for me. Let me describe my scenario:
I am adding some features to a Web app done by myself, that Web app is used to manage the developing of the webpage of some customers. Each customer has a webpage and for each customer there are a list of proposals webpages and who of the designers did that proposal, fine.
The list of the developers and be able to see who did what is the new thing in the Web app and the reason of my question, so, the problem is:
Once the web app loads I get the list of developers from the DB and a list of all the customers that have a webpage. So, the next thing the web app does is auto-select the first customer of the list and show its proposals in another list. To do that, the list of the developers is needed, but as it hasnt been still loaded I get the:
Cannot read property '0' of undefined
When I want to iterate over the $scope.developers object
What I do to get the developers is a $http call like this:
$http({
method: 'POST',
url: url,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(data) {
$scope.developers = data;
});
I know $http performs async calls, but i need something that waits until the $scope.developers has the data loaded.
The problem comes when I need to use the data supposedly stored in $scope.developers but obvously its not. I tried to call the function that uses the $scope.developers inside the .success function but the same happens.
I tried to use the solution in this thread but I get the same error.
How to wait till the response comes from the $http request, in angularjs?
Any help ?? If something in my question is not clear I will try to explain it better.
Please just define $scope.developers as empty array before $http call ie
app.controller("someCtrl", function($scope, $http) {
$scope.developers = [];
//....
$http({
method: 'POST',
url: url,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function(data) {
$scope.developers = data;
});
//..
});
I am using the following plugin https://github.com/VividCortex/angular-recaptcha in order to use recaptcha at a login form.
I am using the following code for verification
$http({
url: 'https://www.google.com/recaptcha/api/verify',
method: 'POST',
params: {privatekey: "key", remoteip: "userip", challenge: "challenge", response: "user_answer" },
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(data) {
console.log(data);
if (valid) {
console.log('Success');
alert('Success');
} else {
console.log('Failed validation');
alert('Fail');
// In case of a failed validation you need to reload the captcha because each challenge can be checked just once
//vcRecaptchaService.reload();
}
});
But google server is not returning anything.
I updated the code but no luck.
I think you have a typo in your code:
post: 'GET'
Change that to method: 'GET' or method: 'POST'.
You can check out angular documentation on http to make sure you've written all the params right.
If this wasn't the source of your problems, you should post more details about your issue (what do you see in your networkl console for example).
Keep in mind that recaptcha validation must be done at server-side. I'm not 100% sure that you are doing that in the browser, but your code looks like it.
As Miguel Trias stated, you shall not validate directly from angularjs/javascript client, instead you should send the challenge and response field to your server and validate then.
Therefore you can use the uri you used (https://www.google.com/recaptcha/api/verify) or a plugin, e.g. if you use php see https://developers.google.com/recaptcha/docs/php. I'd prefer a plugin because it will save work.
Furthermore keep in mind that your private key should not be used in the client, this is why it is called private. It is only used to communicate between your server and the reCaptcha servers. The public key is used to communicate between your client and the reCaptcha servers.
For more info read the Overview
I would like to connect my Chrome Extension to my server, and send data back and forth. In particular, when the user clicks a button on the extension when he's navigating a certain URL, the server checks its database to see how many times that URL has been clicked, increment the count, and send the new count back to the user.
I know that sending the data to the server is possible with an AJAX request, but what about getting the data back from the server?
I think, you may use AJAX for getting updated count in a straightforward manner. For example (with jQuery):
$.ajax({
url: 'ajax/count.php?url=' + encodeURIComponent(newURL),
// dataType: 'json',
success: function(data) {
// parse you data received from server here
// data.count
}
});
So you can "send" new info as parameters of GET request, and get required information from server as http-response. The type of the data used to transfer the count is up to you. For example, this can be json (jQuery provides a shorthand method getJSON, which does the same customized ajax call).
If you don't want GET, you may use POST and specify data as follows:
$.ajax({
type: "POST",
url: "ajax/count.php",
data: { url: newURL },
success: function(data){
// ...
}
});
You will obviously need to use xhr / ajax
But with the present chrome-extension API you might get an error like this
No 'Access-Control-Allow-Origin' header is present on the requested resource.
In order to get around this problem one can simply put the link to the server on the permission array in manifest.json
"permissions": [
"tabs",
"http://www.myserver.dom"
],
For more detailed description see this documentation by Google