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

Posted 2023-02-19

技术标签:

【中文标题】Ajax 请求输出 HTML 代码而不是表单值【英文标题】：Ajax request outputing HTML Code instead of form value 【发布时间】：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。） “我的意思是不相关是因为我的实际问题只是在发送后在警报框中输出输入值。” - 但您并没有尝试输出该值您正在发送，您正在尝试输出您从服务器获得的响应。 【参考方案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() 实际上会输出数字。但结果不同。

以上是关于Ajax 请求输出 HTML 代码而不是表单值的主要内容，如果未能解决你的问题，请参考以下文章

如何清除以前的 AJAX 响应数据（不是 html/表单数据）？ - Django/AJAX

使用 javascript JSON（而不是 ajax 请求）表征 HTML 页面

AJAX表单提交以及数据接收

AJAX Web 应用程序中是不是需要表单标签？

form表单也Ajax区别

怎么把json数据输出到HTML的表单中？