We Keep Coding

AJAX post to PHP empty - javascript

I have checked the other questions - this is not a duplicate.
I have tried all of the solutions I could find and implement.
I am trying to send data from task.php → showCats.php
task.php:
<script type="text/javascript">
$(document).on("click", ".btnCat", function () {
var filter = $(this).data("id");
alert(filter);
$.ajax({
type: 'POST',
url: 'showCats.php',
data: {'filter': filter},
});
$('div.container-fluid').load('showCats.php');
});
</script>
showCats.php:
$area = $_POST['filter'];
$sql = "select AID,name,surname,street_name,house_number, area, plz,poster,visible from addresses WHERE area LIKE '$area' AND visible LIKE 'show' ORDER BY AID DESC";
$rs = mysqli_query($con,$sql);
$str = '';
while ($res = mysqli_fetch_array($rs)) {
$str .= '
<div class="col-md-9">
<div class="task col-md-12 well" id='.$res['AID'].'>
<div>
<button class="btn btn-danger btn-xs btnDelete" id='.$res["poster"].' onclick="refresh()" data-id="'.$res['AID'].'">x</button>
</div>
<div>
<span>'. $res["name"].'</span>
<span>'. $res["surname"].'</span><br>
<span>'. $res["street_name"].'</span>
<span>'. $res["house_number"].'</span><br>
<span>'. $res["plz"].'</span>
<span>'. $res["area"].'</span>
</div>
</div>
</div>';
}
echo $str;
?>
var_dump($_POST); returns NULL, even though I can see the post value under Developer Tools in Chrome.
My GET:
Request URL:https://example.com/showCats.php
Request Method:GET
Status Code:200 OK
Remote Address:xxx:443
Response Headers
view source
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=UTF-8
Date:Fri, 15 Jul 2016 18:43:56 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Pragma:no-cache
Server:nginx/1.6.2
Strict-Transport-Security:max-age=31536000
Transfer-Encoding:chunked
Request Headers
view source
Accept:text/html, */*; q=0.01
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8,de;q=0.6
Connection:keep-alive
Cookie:PHPSESSID=vudgbb33574tfod2vu48hst830
Host:example.com
Referer:https://example.com/tasks.php
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
X-Requested-With:XMLHttpRequest
My POST:
Request URL:https://example.com/showCats.php
Request Method:POST
Status Code:200 OK
Remote Address:xxx:443
Response Headers
view source
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=UTF-8
Date:Fri, 15 Jul 2016 18:43:56 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Pragma:no-cache
Server:nginx/1.6.2
Strict-Transport-Security:max-age=31536000
Transfer-Encoding:chunked
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8,de;q=0.6
Connection:keep-alive
Content-Length:12
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:PHPSESSID=vudgbb33574tfod2vu48hst830
Host:example.com
Origin:https://example.com
Referer:https://example.com/tasks.php
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
X-Requested-With:XMLHttpRequest
Form Data
view source
view URL encoded
filter:Turgi

You are trying to send data from task.php -> showCats.php ! your code does that very well by using this:
$.ajax({
type: 'POST',
url: 'showCats.php',
data: {'filter': filter},
});
The problem is when you do this : $('div.container-fluid').load('showCats.php'); a GET request will be sent to the server! so It's normal to find that var_dump($_POST) return NULL.
If you want to show/get the response you can use the success event like this:
$.ajax({
type: 'POST',
url: 'showCats.php',
data: {'filter': filter},
//A function to be called if the request succeeds.
success: function(data) {
$('div.container-fluid').html(data)
},
//A function to be called if the request fails
error: function(xhr, status, error) {
alert('An error occurred:'+error);
}
});

setting a datatype parameter tells what kind of data you are sending.
type: "POST",
dataType: 'json',
I would concur with those comments above. Loading the program a second time does not report the values of the database call. Further, wouldn't AJAX normally return values to the calling program with an echo of json_encode, instead of just echoing the variable to a run of the PHP page that does not get viewed?

Related

I have 2 websites:
3rdpartycookiemanager.com
website.com
From website: https://www.website.com
I do an Ajax call to: https://www.3rdpartycookiemanager.com/cookies.php
with the following jQuery call:
$.ajax({
...
type: 'POST',
url: 'https://www.3rdpartycookiemanager.com/cookies.php',
cache: false,
crossDomain: true,
dataType: 'json',
data: {
email: 'bill.gates#microsoft.com'
},
xhrFields: {
withCredentials: true
},
...
});
On the Developer Tools of the browser I see the following:
General
Request URL:https://www.3rdpartycookiemanager.com/cookies.php
Request Method:POST
Status Code:200
Response Headers
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:https://www.website.com
Content-Type:application/json
Date:Thu, 22 Oct 2020 16:47:32 GMT
Server:
Set-Cookie:data=%7B%22email%22%3A%22bill.gates%40microsoft.com%22%7D; expires=Fri, 22-Oct-2021 16:47:32 GMT; Max-Age=31536000; path=/; secure; SameSite=None
Vary:Origin
Provisional headers are shown
Request Headers
Accept:application/json, text/javascript, */*; q=0.01
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Origin:https://www.website.com
Referer:https://www.website.com/
User-Agent:Mozilla/5.0 (iPhone; CPU iPhone OS 13_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1
Form Data
action:set
data[email]:bill.gates#microsoft.com
where on the Response Headers you can see this:
Set-Cookie:data=%7B%22email%22%3A%22bill.gates%40microsoft.com%22%7D; expires=Fri, 22-Oct-2021 16:47:32 GMT; Max-Age=31536000; path=/; secure; SameSite=None
My problem is:
This works on:
Windows - Edge, Chrome, Firefox
Android - Chrome, Firefox
macOS - Chrome, Firefox
But doesn't work on:
macOS - Safari
iOS - Safari, Chrome
Extra notes:
On website: 3rdpartycookiemanager.com I use PHP and have the following:
~/public_html/3rdpartycookiemanager.com/.htaccess
# ----------------------------------------------------------------------
# Allow loading of external fonts
# ----------------------------------------------------------------------
<FilesMatch "cookies\.php$">
<IfModule mod_headers.c>
SetEnvIf Origin "http(s)?://(www\.)?(website.com)$" AccessControlAllowOrigin=$0
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header add Access-Control-Allow-Credentials true
Header merge Vary Origin
</IfModule>
</FilesMatch>
~/public_html/3rdpartycookiemanager.com/cookies.php
<?php
$action = $_POST['action'] ?? '';
switch ($action) {
case 'set':
$data = $_POST['data'] ?? '';
$arr_cookie_options = [
'expires' => time() + 365*24*60*60,
'path' => '/',
// 'domain' => '.local',
'samesite' => 'None', // required to enable cross-site usage
'secure' => true, // required in order to use: 'samesite' => 'None'
'httponly' => false
];
setcookie('data', json_encode($data), $arr_cookie_options);
$response = [
'status' => 'success',
];
break;
case 'get':
$response = json_decode($_COOKIE['data'] ?? '', true);
break;
}
header('Content-Type: application/json');
echo json_encode($response);
?>
Any idea on how to make this work on:
macOS - Safari
iOS - Safari, Chrome
as it works on the rest of the Devices and Browsers?
Thanks!

I run into the same problem, the only solution I’m aware of is changing safari settings on your iOS devices. Find Settings->safari->prevent cross-site tracking and uncheck it.

I am trying to upload a file to the server , I do that successfully but after success, angular or browser or I don't know how just redirect me back to my initial state in angular js
the success callback hit and I have no error
ng-fileupload version 3.2.5.
here is my function in the controller :
$scope.uploadIssueAttachment = function (files, issue) {
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
$upload.upload({
url: '/Handlers/UploadHandler.ashx?des=HelpDesk'
, method: 'POST'
, file: file
, }).progress(function (evt) {}).then(function (data) {
var _fileName = data.headers('fileName');
var _originalFileName = data.headers('orgName');
var _type = data.headers('format');
$scope.newIssueAttachments.push({
fileName: _originalFileName
, temporaryName: _fileName
, fileType: _type
});
}).catch(function (error) {
console.log(error);
});
}
}
};
and here is my html markup
<span ng-file-select ng-file-change="uploadIssueAttachment($files,newIssue)" class="file-input btn btn-sm btn-file" >
the function hit and I upload a file, browser response with 200 status
Request URL:http://localhost:3080/Handlers/UploadHandler.ashx?des=HelpDesk
Request Method:POST
Status Code:200 OK
Remote Address:[::1]:3080
Referrer Policy:no-referrer-when-downgrade
Response Headers
view source
Cache-Control:private
Content-Length:0
Date:Mon, 17 Jul 2017 10:33:56 GMT
fileName:ea8c8799-0f48-49f4-a33c-dca0726af929.png
format:image/png
name:ea8c8799-0f48-49f4-a33c-dca0726af929.png
orgname:avator.png
Server:Microsoft-IIS/10.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?RDpcU291cmNlXFdvcmtzcGFjZXNcUE1PLkFDQVxEZXZcQk1TXFJheWthbS5Ccm9rZXJzLldlYi5NVkNcSGFuZGxlcnNcVXBsb2FkSGFuZGxlci5hc2h4?=
Request Headers
view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:16544
Content-Type:multipart/form-data; boundary=----WebKitFormBoundarylgAXmkMLtLGhRRU4
Cookie:ASP.NET_SessionId=ska22gomunzfvxqv1wwihbmh; .ASPXAUTH=A8E3E65AECDBB20189E01D261B3580E6997A7763615AD085A0E92F5F44B2D7DFA2C0E39BA47876EAE614EF06C56E692B71982D9035F84075C466E63632653E3E7CC03F042B850200EFBC2867E8A0F7EA3F8A7989AAB68E267891CB819AB9024D04DB430D6B8D8E692D64652CA2645681
Host:localhost:3080
Origin:http://localhost:3080
Referer:http://localhost:3080/admin/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
Query String Parameters
view source
view URL encoded
des:HelpDesk
Request Payload
------WebKitFormBoundarylgAXmkMLtLGhRRU4
Content-Disposition: form-data; name="file"; filename="avator.png"
Content-Type: image/png
------WebKitFormBoundarylgAXmkMLtLGhRRU4--
and then with no error I just get redirected to my start page, I don't know how to track the event that changed state.
the interesting thing are when I heat breakpoint in dev console and I wait just for few minute, then there is no state change and everything goes well.
near to pull my hair.
any suggestion?

You havent wrote which version you are using but I think this structure will help you .Its always good to use then...catch in angular success is now deprecated.
You can see it here
upload Structure(with then...catch)
$upload.upload({
url: '<YOUR URL>'
file: <file>
}).progress(function (evt) {
// progress = parseFloat(evt.loaded / evt.total)*100;
}).then(function(result) {
//handle successful result
}).catch(function(errorCallback){
//you can see error here
});
Let me know if it wont work.
Edited
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams) {
console.log(toState); //put break point over here try to debug
console.log(fromState);
});

I am trying to make an Ajax call to hit a webservice and get the response.But getting uncaught syntaxerror:unexpected token < in google chrome console.
Here's my Ajax Request:
$(document).ready(function(){
$.ajax({
url:"http://10.10.1.5:8089/axis2/services/cmtlpmservice/getAllMonitors",
dataType:"jsonp",
jsonpCallback:"callback",
type:"GET",
success:function(response){
console.log(response);
}
});
});
The Request header is as follows:
Request URL:http://10.10.1.5:8089/axis2/services/cmtlpmservice /getAllMonitors?callback=callback&_=1487912464838
Request Method:GET
Status Code:200 OK
Remote Address:10.10.1.5:8089
Accept:/
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Authorization:Basic YWRtaW46
Cache-Control:max-age=0
Connection:keep-alive
Host:10.10.1.5:8089
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36
The Response Header as follows:
Cache-Control:no-cache
Content-Type:application/xml;charset=UTF-8
Date:Fri, 24 Feb 2017 05:01:05 GMT
Expires:Thu, 01 Jan 1970 10:00:00 EST
Pragma:No-cache
Server:Apache-Coyote/1.1
Transfer-Encoding:chunked
X-Powered-By:Servlet 2.5; JBoss-5.0/JBossWeb-2.1
The Response looks like :
<ns:getAllMonitorsResponse xmlns:ns="ws.core.dorado.com">
<ns:return>
{
"monitors": [{
"id": "com.dorado.broadscope.monitor.Monitor::R‌​GNEXGvol54w2a#_1.3.6‌​.1.4.1.20138.800.20.‌​12.1.9.1",
"maxAttrNa‌​me": "ifTemperatureVa‌​lue Max",
"name": "ifTemperatureValue",
"minAttrName": "ifTemperatur‌​eValue Min",
"maxAttrId": "com.dorado.broadscope.monitor.Monitor::RGN‌​EXGvol54w2a#_1.3.6.1‌​.4.1.20138.800.20.12‌​.1.9.1Max",
"minAttrI‌​d": "com.dorado.broad‌​scope.monitor.Monito‌​r::RGNEXGvol54w2a#_1‌​.3.6.1.4.1.20138.800‌​.20.12.1.9.1Min"
}]
}
</ns:return>
</ns:getAllMonitorsResponse>

Due to some error in getAllMonitors it returns whole html page instade of json deta in response. your controller is culpit insted of your ajax.

I am trying to write a Single Page App (SPA) based on AngularJS. The app should connect to a webserver that provides a RestFul services, but each end point requires username and password along with other parameters. Since I am a beginner in this area, before moving towards the actual development, I tried PostMan/Advanced Rest Client chrome extensions to verify the basic connections. A sample request preview :
POST /servicesNS/admin/search/search/jobs/export HTTP/1.1
Host: localhost:8089
Cache-Control: no-cache
Content-Type: application/x-www-form-urlencoded
search=search+error+|+table+host&output_data=xml&username=admin&password=unity3d
This is actually equivalent to the cURL command:
curl -k -u admin:unity3d --data-urlencode search="search error | table host" -d "output_mode=xml" https://localhost:8089/servicesNS/admin/search/search/jobs/result
After getting successful results in above mentioned ways, I am now looking for equivalent way of doing it in AngularJS.
var app = angular.module('TabsApp', []);
app.controller('TabsCtrl', function ($scope, $http)
{
login = function () {
$scope.userName ="admin";
$scope.password ="unity3d"
$http({
method :"POST",
url:"https://localhost:8089/servicesNS/admin/search/search/jobs/export",
data: { "username" : "admin" , "password": "unity3d", "search" : "search error"},
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data, status, headers, config) {
console.log('status',status);
console.log('data',status);
console.log('headers',status);
});
}
});
This gives me error 401 Unauthorized, the headers of the response:
> Remote Address:127.0.0.1:8089 Request
> URL:https://localhost:8089/servicesNS/admin/search/search/jobs/export
> Request Method:POST Status Code:401 Unauthorized Request Headersview
> source Accept:application/json, text/plain, */* Accept-Encoding:gzip,
> deflate Accept-Language:en-US,en;q=0.8 Connection:keep-alive
> Content-Length:65 Content-Type:application/x-www-form-urlencoded
> Host:localhost:8089 Origin:http://localhost:63342
> Referer:http://localhost:63342/UI/UI1.html User-Agent:Mozilla/5.0
> (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
> Chrome/39.0.2171.71 Safari/537.36 Form Dataview sourceview URL encoded
> {"username":"admin","password":"unity3d","search":"search error"}:
> Response Headersview source Access-Control-Allow-Credentials:true
> Access-Control-Allow-Headers:Authorization
> Access-Control-Allow-Methods:GET,POST,PUT,DELETE,HEAD,OPTIONS
> Access-Control-Allow-Origin:* Cache-Control:private
> Connection:Keep-Alive Content-Length:130 Content-Type:text/xml;
> charset=UTF-8 Date:Sat, 29 Nov 2014 19:53:59 GMT Server:Splunkd
> Vary:Cookie, Authorization WWW-Authenticate:Basic realm="/splunk"
> X-Content-Type-Options:nosniff X-Frame-Options:SAMEORIGIN
And the output is :
<?xml version="1.0" encoding="UTF-8"?> <response> <messages>
<msg type="ERROR">Unauthorized</msg> </messages> </response>
Any idea what is going wrong?

If you are sending response in the format of 'application/x-www-form-urlencoded' the actual data format should be the same.
What you are sending currently is a JSON object. You would need to use $http tranformer to tranform the request: Something in line of
transformRequest: function (data) {
var postData = [];
for (var prop in data)
postData.push(encodeURIComponent(prop) + "=" + encodeURIComponent(data[prop]));
return postData.join("&");
},
See a working fiddle here http://jsfiddle.net/cmyworld/doLhmgL6/

I am getting a JSON parseerror even though the return from the server was successful. Here is my save code where fail() is always being run
#model.save()
.fail(=> #resetForm() )
.always (obj, error) ->
console.log obj
console.log obj.responseText
console.log JSON.parse(obj.responseText)
Here is my error object:
"parsererror"
"No conversion from text to http://api2.local/users/auth"
Some notes:
I am on Jquery 1.8.3 and Backbone 0.9.9
The server responds correctly with json - here is my response header
Access-Control-Allow-Headers:origin, x-requested-with, content-type, accept
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Max-Age:86400
Connection:Keep-Alive
Content-Length:202
Content-Type:application/json; charset=utf-8
Date:Fri, 21 Dec 2012 18:46:25 GMT
Keep-Alive:timeout=5, max=100
Server: xxx
X-Powered-By:PHP/5.3.1
console.log JSON.parse(obj.responseText) correctly gives me a JSON object
EDIT: Request Headers
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:54
Content-Type:application/json
Host:api2.local
Origin:http://localhost:3000
Pragma:no-cache
Referer:http://localhost:3000/login
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.101 Safari/537.11
X-Requested-With:XMLHttpRequest
EDIT: Request Payload via POST
{"email":"x#x.com","password":"xxx"}
EDIT: Response Payload
{
"user_id":"xx",
"first_name":"xxx",
"last_name":"xxx",
"email":"x#x.com",
"role":"xxxx",
"date_joined":"xxx"
}

Ahhhh - Programming can be so irritating sometimes. Finally figured this out - thanks for everyones help but it was a simple coffeescript compiling issue
So before I had
$.ajaxPrefilter ( (options, originalOptions, jqXHR) ->
options.url = "#{ API_URL }" + options.url
)
which compile to return both options.url and $.ajaxPrefilter. For whatever reason, Jquery was picking up the options.url as a DataTypes argument on the ajaxPrefilter function. The solution was to return false:
$.ajaxPrefilter \
(options, originalOptions, jqXHR) ->
options.url = "#{ API_URL }" + options.url
no
which gives the correct compiled version
return $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
options.url = ("" + API_URL) + options.url;
return false;
});