正如標題所說，我已經有 2 天的 Ajax 問題了，但似乎找不到原因。我查了一下，但沒有找到合適的解決方案。
這是我正在使用的代碼：
<!DOCTYPE html>
<html>
<head>
<title>Test_unity</title>
</head>
<style type="text/css">
.Read_position {
max-width: 100%;
display: flex;
flex-direction: column;
align-items : center;
padding: 10px;
box-shadow: 0px 0px 20px #2c3e50;
margin: 10%;
}
.DivForm {
display: flex;
flex-direction: column;
justify-content: center;
}
.text-align{
text-align: center;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
console.log("jQuery est prêt !");
});
function ajax_request(){
console.log("RequeteAjax pos_unity");
let tmp_x = $('#pos_x').val();
let tmp_z = $('#pos_z').val();
console.log(tmp_x " " tmp_z)
$.ajax({
url :"get_pos.php",
type :"POST",
data : JSON.stringify({
pos_x : tmp_x,
pos_z : tmp_z
}),
contentType: "application/json",
dataType: "json",
success : function(text,state){
console.log("operation reussi : " text);
alert("tmp : " text);
},
error : function(result, state, error){
//alert("resultat : " result " / statut " state " / erreur : " error);
alert("error : \n" result.responseText);
},
complete : function(result, state){
alert("complete : " result " / statut " state);
console.log(tmp_x "/" tmp_z)
}
})
}
</script>
<body>
<?php
echo('
<form class="Read_position" method="post" name="main_form" action="">
<p class="text-align"><b>Envoyer une position a Unity : </b></p>
<div class="DivForm">
<label for="pos_x">Position X : </label><input type="number" id="pos_x" name="pos_x">
</div>
<div class="DivForm">
<label for="pos_z">Position Z : </label><input type="number" id="pos_z" name="pos_z">
</div>
<button type="submit" name="entree"style="margin-top:10px;" onclick="ajax_request()">send positions</button>
</form>
<br>
');
?>
</body>
</html>
我試圖用那個 Ajax 請求做的是獲取用戶輸入的表單值并將它（現在）顯示在警告框中。
這是 get_pos.php 中的代碼，因為它已被詢問：
<?php
$pos_x = 0;
$pos_z = 0;
$file = "positions_unity.txt";
$error_msg = "ERROR" ;
if( isset($_POST["pos_x"]) && isset($_POST["pos_z"]) ) {
$data = $_POST["pos_x"] "/" $_POST["pos_z"];
file_put_contents($file, $data);
exit();
} else if(file_get_contents($file) === "" ) {
file_put_contents($file, $error_msg);
echo(file_get_contents($file));
exit();
} else {
echo(file_get_contents($file));
exit();
}
?>
這是錯誤函式顯示的內容：
error :
<!DOCTYPE html>
<html>
<head>
<title>Test_unity</title>
</head>
<style type="text/css">
.Read_position {
max-width: 100%;
display: flex;
flex-direction: column;
align-items : center;
padding: 10px;
box-shadow: 0px 0px 20px #2c3e50;
margin: 10%;
}
.DivForm {
display: flex;
flex-direction: column;
justify-content: center;
}
...
預期的輸出將是用戶輸入的任何內容。
如果您有任何想法，請告訴我。
先感謝您 ！
uj5u.com熱心網友回復：
這里發生了許多問題：
- 未正確處理默認表單提交并阻止它以啟動 AJAX 代碼
- 在 AJAX 請求中發送 JSON，但未將 PHP 配置為期望 JSON
- 在 PHP 回應中發送純文本，但將 jQuery 配置為期望 JSON。
- 在用戶提交一些資料的情況下，您的代碼會將它們存盤在檔案中，但不會再次輸出它們。目前它只被編程為在沒有提交 POST 值時輸出檔案內容。
這應該解決所有這些問題：
HTML：
<button type="submit" name="entree"style="margin-top:10px;">send positions</button>
（剛剛洗掉了老式的 inline onlick）
Javascript：
jQuery(document).ready(function() {
$('form.Read_position').on('submit', function(e) { //better event handler
e.preventDefault(); //prevent default postback
console.log($('#pos_x').val() " " $('#pos_z').val())
//send normal form data, no JSON in either direction
$.ajax({
url: "get_pos.php",
type: "POST",
data: {
pos_x: $('#pos_x').val(),
pos_z: $('#pos_z').val()
},
success: function(text) {
console.log("operation reussi : " text);
alert("tmp : " text);
},
error: function(result, state, error) {
alert("error : \n" result.responseText);
},
complete: function(result, state) {
alert("complete : " result " / statut " state);
console.log(tmp_x "/" tmp_z)
}
})
});
});
PHP：
<?php
$file = "positions_unity.txt";
$error_msg = "ERROR" ;
if( isset($_POST["pos_x"]) && isset($_POST["pos_z"]) ) {
$data = $_POST["pos_x"] "/" $_POST["pos_z"];
file_put_contents($file, $data);
}
else if(file_get_contents($file) === "" ) {
file_put_contents($file, $error_msg);
}
//always echo the data. HTML-encode it to protect against XSS
echo(file_get_contents(htmlspecialchars($file)));
exit();
?>
uj5u.com熱心網友回復：
這個例子在php中獲取ajax請求：
$postRequest = file_get_contents("php://input");
$receiveRequest = json_decode(stripslashes(isset($_REQUEST['data']) ? $_REQUEST['data'] : $postRequest));
$pos_x=$receiveRequest['pos_x'];
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/349916.html
標籤：javascript php 阿贾克斯 http