Ajax请求输出HTML代码而不是表单值

正如标题所说，我已经在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;
}
...

预期的输出将是用户键入的任何内容。

如果你有任何想法，请告诉我。

提前谢谢！

这里出现了许多问题：

没有正确处理默认表单提交并阻止它以启动AJAX代码
在AJAX请求中发送JSON，但不将PHP配置为期望JSON
在PHP响应中发送纯文本，但将jQuery配置为期望JSON
在用户提交某些数据的情况下，您的代码会将它们存储在文件中，但不会再次输出。目前，它只被编程为在没有提交POST值时输出文件内容

这应该会解决所有这些问题：

HTML:

<button type="submit" name="entree"style="margin-top:10px;">send positions</button>

(刚刚删除了老式的内联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();
?>

相关内容

最新更新

热门标签：