AJAX request not working properly due to .htaccess?

Question

JavaScript

Actually, you need to fasten the form submission with the help of AJAX, but it does not work because of the existing .htaccess - the POST array does not reach PHP (if you remove .htaccess, then everything is OK).

.htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^.*$ $0.php [L,QSA]
RewriteCond %{THE_REQUEST} ([^\s]*)\.php(\?[^\s]*)?
RewriteRule (.*) %1 [R=301,L]

ajax request:

$.ajax({
                    url: 'handler.php',
                    type: 'POST',
                    data: data,
});

How and is it possible to fix the AJAX request without touching .htaccess?

Answer 1

Correct the request address by removing the .php.
Or add an exception for POST requests to .htaccess.

.htaccess

RewriteEngine On

RewriteCond %{REQUEST_METHOD} !POST
RewriteCond %{THE_REQUEST} ([^\s]*)\.php(\?[^\s]*)?
RewriteRule (.*) %1 [R=301,L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^.*$ $0.php [L,QSA]

Answer 2

inline - this css is written in the html document itself in the <style> tag