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

【问题标题】：Ajax request outputing HTML Code instead of form valueAjax 请求输出 HTML 代码而不是表单值
【发布时间】：2021-12-19 09:12:30
【问题描述】：

正如标题所说，我在使用 Ajax 时遇到问题已经 2 天了，但似乎无法找到原因。我查了一下，但没有找到合适的解决方案。

这是我正在使用的代码：

<!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 请求。
不要使用内联 onclick 处理程序，也不要使用任何使用它们的教程。处理该表单提交的正确方法是：$('form.Read_position').on('submit', function (e) { e.preventDefault(); /* more code here */ }); 这将停止常规的表单提交，在您的情况下会重新加载文档（感谢表单没有 action 属性）。
这是修复了主要问题和其他一些问题的代码：jsfiddle.net/vz3tmk4r
“即使它与这个问题无关” - 以您目前在此处展示的知识和调试技能水平，您将是确定该问题的合适人选。 .?如果您的 AJAX 代码进入 error 处理程序，那么您的服务器必须响应错误 HTTP 状态代码或错误的内容类型 - 所以当然服务器端发生的事情是相关的这里。你需要弄清楚为什么它实际上会出错，但你的 isset 陈述肯定永远不会是真的。（因为您发送的是 JSON，在这种情况下 PHP 不会首先填充 $_POST。）
“我的意思是不相关是因为我的实际问题只是在发送后在警报框中输出输入值。” - 但您并没有尝试输出该值您正在发送，您正在尝试输出您从服务器获得的响应。

标签： javascript php ajax http

【解决方案1】：

这里发生了许多问题：

未正确处理默认表单提交并阻止它以启动 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();

?>

【讨论】：

谢谢！代码确实像那样干净。尽管如此，我仍然在 success() 警报框和控制台中获得 HTML 代码。我不明白为什么会这样。
也许你的文件中<?php标签之前有一些HTML代码？如果是这样，您应该将此 PHP 代码移动到文件的开头。
无论如何，如果答案对您有所帮助，请记住将其标记为“已接受”和/或投票 - 谢谢 :-)
get_pos.php 文件中实际上根本没有 HTML。所有的 HTML 都在主文件中（上面的 JavaScript 代码）
这也有点奇怪，因为在 $('pos_x").val() 或 $('pos_z").val() 上使用 console.log() 实际上会输出数字。但结果不同。