我的主html页面有3个按钮，每个按钮都有一个不同的背景图像链接到它。我试图通过Ajax POST将此映像的源代码传递给我的PHP文件，以便写入txt文件。
JS代码：
// MAIN
$(function() {
$(".artButton").click(function(){
var artId = $(this).attr("id");
var source = $("#"+artId).css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1');
// DEBUG
console.log(source) //example: http://localhost/crowd.jpg
console.log(typeof source)//example: string
$.ajax({
type: 'POST',
url: 'writeToTxt.php',
data: source,
success: function(response) {
console.log("Succes");
}
});
});
});
PHP文件：
<?php
$my_file = 'toExpose.txt';
$handle = fopen($my_file, 'w') or die('Cannot open file: '.$my_file);
$data = $_POST['data'];
fwrite($handle, $data);
?>
以上代码导致了以下铬控制台错误：405 AJAX POST错误（https://i.stack.imgur.com/lhIpr.png ）。请注意，我不是编程专家，从编码的角度来看这可能不是最好的实践，但我只是需要它来发挥我所期望的作用！非常感谢你的帮助！
注意: 一切都在本地主机上运行。
更新: 这是页面的HTML：
<html>
<link href="style.css" rel="stylesheet" type="text/css"/>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<header class="navbar">
<div class="container">
<h1>Welcome to oneFRAME</h1>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="Home.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Library</a>
</li>
<li class="nav-item">
<a class="nav-link" href="LibraryV2.html">Library v2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">About</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</header>
<button id="choice1" class="artButton" type="button">Nature</button>
<button id="choice2" class="artButton" type="button">Art</button>
<button id="choice3" class="artButton" type="button">Crowd</button>
<script src="jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="main_temp.js"></script>
</body>
</html>
An HTTP 405 error indicates a problem with your script and/or your web server. The error means that you are attempting to pass back a file that does not have the necessary permissions on the server to receive Post information from another script.
You are getting client side error. 4.x.x is all about client side errors.
Change your ajax request like this -
$.ajax({
type: 'POST',
url: 'writeToTxt.php',
data: 'name=xxx&address=xxxx',
success: function(response) {
console.log("Succes");
}
});replace 'name=xxx&address=xxxx' with your post data.
and in PHP use like this - $name = $_POST['name']; $adress = $_POST['address'];
</div>
Try passing data in object like
$.ajax({
type: 'POST',
url: 'writeToTxt.php',
data: {data: source},
success: function(response) {
console.log("Succes");
}
You are getting an error because you don't have write permission in htdocs or www directory.
sudo chmod -R 777 /directoryNot sure but I have doubt your path must be http://localhost/example/index.php
Updated Code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<button id="choice1" class="artButton" type="button" style="background-image:url('http://localhost/Veridocglobalportal2/veridocedu/public/img/edu-logo.png');">Nature</button>
<button id="choice2" class="artButton" type="button">Art</button>
<button id="choice3" class="artButton" type="button">Crowd</button>
<script type="text/javascript">
// MAIN
$(function() {
$(".artButton").click(function(){
var artId = $(this).attr("id");
var source = $("#"+artId);
switch (artId) {
case "choice1":
var source = "http://localhost/crowd.jpg";
break;
case "choice2":
var source = "http://localhost/people.jpg";
break;
case "choice3":
var source = "http://localhost/alone.jpg";
break;
}
// DEBUG
console.log(source) //example: http://localhost/crowd.jpg
console.log(typeof source)//example: string
$.ajax({
type: 'POST',
url: 'writeToTxt.php',
data: {"data":source},
success: function(response) {
console.log("Succes");
}
});
});
});
</script>
</body>
</html>
writeTotxt.php
<?php
$cwd=getcwd();
$data = $_POST['data'];
$myfile = file_put_contents("$cwd/logs.txt", $data.PHP_EOL,FILE_APPEND | LOCK_EX );
Try this
$(function() {
$(".artButton").click(function(){
var artId = $(this).attr("id");
var source = $("#"+artId).css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1');
// DEBUG
console.log(source) //example: http://localhost/crowd.jpg
console.log(typeof source)//example: string
$.ajax({
type: 'POST',
url: 'writeToTxt.php',
data: {source:source},
success: function(response) {
console.log("Succes");
}
});
});
});