how to receive array data in ajax request page wordpress - angularjs

I am sending array to PHP through angularJs $http, but when I receiving data it was showing null, I don't know is that my procedure is correct or not,
js file is
var newdisable_comments_on_post_types = JSON.stringify(allTabData.disable_comments_on_post_types);
$http({
method:'post',
url:url,
params:{
'disable_comments_on_post_types': newdisable_comments_on_post_types
}
});
while sending in the header it sending like this
disable_comments_on_post_types:{"post":false,"page":false,"attachment":false}
in the PHP file, i did some of the procedure to receive it
$a = $_POST['disable_comments_on_post_types']['post'];// method 1
$a = $_POST['disable_comments_on_post_types'] // method 2
$x=1
foreach($a as $val){
$b[$x]=$val;
$x++;
}
$a = $_POST['disable_comments_on_post_types']->post;// method 3
I am getting null in response every method while I returning data to check
echo json_encode($a);
am I doing any wrong or in WordPress we cant send an array to PHP?

Change Your $http service to this:
By default, the $http service will transform the outgoing request by
serializing the data as JSON and then posting it with the content-
type, "application/json"
$http({
method: 'POST',
url: url,
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("&");
},
data: allTabData.disable_comments_on_post_types
}).success(function () {});

Related

What is transformRequest in angularjs

I have a code
transformRequest: function(obj) {
var str = [];
for(var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
}
I know this code is change the serialization algorithm and post the data with the content-type, "application/x-www-form-urlencoded". But i dont know what is syntax of it . What is obj in function . Please explain for me . Thank
Transform Request is generally used for converting request data in the format which can be easily handled by server (Your Back end code).
For Example - If you want to send data with some modification in request then you can use it .
$scope.save = function() {
$http({
method: 'POST',
url: "/Api/PostStuff",
//IMPORTANT!!! You might think this should be set to 'multipart/form-data'
// but this is not true because when we are sending up files the request
// needs to include a 'boundary' parameter which identifies the boundary
// name between parts in this multi-part request and setting the Content-type
// manually will not set this boundary parameter. For whatever reason,
// setting the Content-type to 'undefined' will force the request to automatically
// populate the headers properly including the boundary parameter.
headers: { 'Content-Type': undefined},
//This method will allow us to change how the data is sent up to the server
// for which we'll need to encapsulate the model data in 'FormData'
transformRequest: function (data) {
var formData = new FormData();
//need to convert our json object to a string version of json otherwise
// the browser will do a 'toString()' on the object which will result
// in the value '[Object object]' on the server.
formData.append("model", angular.toJson(data.model));
//now add all of the assigned files
for (var i = 0; i < data.files; i++) {
//add each file to the form data and iteratively name them
formData.append("file" + i, data.files[i]);
}
return formData;
},
//Create an object that contains the model and files which will be transformed
// in the above transformRequest method
data: { model: $scope.model, files: $scope.files }
}).
success(function (data, status, headers, config) {
alert("success!");
}).
error(function (data, status, headers, config) {
alert("failed!");
});
};
};

Angular Parse GET Return

m gets generated in a factory with the following request:
var m = $http({method: 'GET', url: JSONurl});
Console log of m after the GET request:
I need to grab m's "data:" which has the Array[2] I need. How would I create a new variable with just the data array?
If you look at the angularJS docs for $http, you'll see that you'll need to use the promise to get the data. So you want something along the lines of:
$http({
method: 'GET',
url: JSONurl
}).then(function successCallback(response) {
//response has the data on a successful call
}, function errorCallback(response) {
//this response will have the error data on a failed call
});

Make sure that a web service call fails if it is not getting response

I am trying to call a webservice. I want that if i am not getting response from web service in 10 sec then the service call should fail and show the error message in .error section.
I tried passing timeout in http call but that is not working for mobile phones.
My service call is like this-
$http({
method: "POST",
url: url,
*timout:10000,*
headers: {
'Content-Type': "application/x-www-form-urlencoded",
'Encoding':"UTF-8",
'devicemetadata':devicemetadata
},
data: inputData,
transformRequest: function(obj) {
var str = [];
for(var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
}
})
.success(function(response){
console.log("loginServiceSuccess:"+JSON.stringify(response));
def.resolve(response);
})
.error(function(msg){
console.log("loginServiceFailure"+msg);
def.reject(msg);
});
Timeout is not working for mobile phones.
I want that if service does not give response in 10sec .error block should be executed...any solution?

Update $scope.variable value after POST

I am creating an simple TODO app using AngularJS, i POST the data to server when response comes, that response i want to store it existing variable and refresh the view. i.e
// This stores on page load, its working fine
var todos = $scope.todos = sever_passed_data;
but when i do,
$scope.$watch('todos', function () {
var request = $http({
method: "post",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
url: my_url,
data: $.param({todos_list: angular.toJson(todos)})
});
request.success(function(responce){
var todos = $scope.todos = responce;
});
}, true);
after this it gives me weird(it goes in infinite loop and posting data to server) output, i mean the responce doesn't stores in todos variable.
If you want to store the returned value of the HTTP POST in the $scope.todos variable, you should use response.data. response contains the entire HTTP response, including the response code, response headers, response body, etc.
Why are you declaring the local variable todos? It will go out of scope as soon as the function exits. just assign $scope.todos. Also, you might want to use then instead of success. Here's an example:
$http({
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
url: my_url,
data: $.param({todos_list: angular.toJson(todos)})
}).then(function(response) {
$scope.todos = response.data;
});

pyramid not work with angular $http post

$http({method: 'POST', url: 'http://localhost:5001/products', data: {token: $scope.product.token}}).success(
function () {
alert('success');
}
);
In the pyramid side, request.POST show that NOVars: Not a form request. Not an HTML form submission( Content-Type: application/json)
I am using cornice to provide my api(/products) and I thinks it is pyramid's problem.
Does anyone have a solution?
Angular sends the post body (data) as application/json while forms are normally sent as application/x-www-form-urlencoded. Pyramid parses the body and let you access it in request.POST when it's encoded as a normal form.
It is not be possible to represent every data encoded the Angular way (json) as a key/value pair like is provided by pyramid API.
[
1,
2,
3,
4
]
Solution on Pyramid side
It can be solved per view or globally
Per view
This is the pyramid way and the most flexible way to handle this.
#view_config(renderer='json')
def myview(request):
data = request.json_body
# deal with data.
return {
"success" : True
}
Globally
Pyramid can most likely be set to assume a body encoded as application/json is an object and its properties be put in request.POST.
Solution on Angular side
As with the pyramid side, it can be solved per request and globally.
Per request
You need to send the data the way forms are normally sent:
$http({
method: 'POST',
url: url,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: function(obj) {
var str = [];
for(var p in obj) {
if (obj.hasOwnProperty(p)) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
}
return str.join("&");
},
data: xsrf
}).success(function () {});
Globally
To send posts as form by default, configure the $httpProvider to do so.
angular.module('httpPostAsForm', [])
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
$httpProvider.defaults.transformRequest.unshift(function (obj) {
var str = [];
for(var p in obj) {
if (obj.hasOwnProperty(p)) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
}
return str.join("&");
});
}]);
Then include this module in your app:
angular.module("app", ["httpPostAsForm"]);
AngularJS $http.post is different from jquery's. The data you pass is not posted as a form but as json in the request body. So your pyramid view can not decode it as usual. You have to either:
directly access the request body and decode it in your pyramid view;
or modify your angularjs code to post your data as form content : see this other question in stackoverflow
the answer is angular $post do OPTIONS request first and then do the POST request, get data form the request.json_body
Use req.json_body if you post some json-decoded content. req.GET, req.POST, req.params only cope with from submissions. Btw, $http -> ngResource -> restangular ...
Try setting contenttype in $http, something like below.
$http(
{
url: url,
contentType: "application/json",
data: data,
method: method
})
.success(function (response) {
successcb(response);
}).error(function (data, status, headers, config) { errorcb(data); });
};
You can simply get the POST data this way:
query = json.loads(request.body)

Resources