jQuery Ajax POST请求返回HTML代码而非表单值问题求助

问题修复方案 #

你的代码存在5处核心问题，按优先级修改即可解决异常：

问题1：未阻止表单默认提交行为 #

你的提交按钮是type="submit"，点击触发Ajax请求的同时，表单会执行默认提交逻辑刷新当前页面，导致Ajax请求被中断、甚至直接返回当前页面的HTML代码（就是你看到的报错内容）。
修复方案：
把按钮类型改成普通按钮，不要用submit类型：

<button type="button" name="entree" style="margin-top:10px;" onclick="ajax_request()">send positions</button>

问题2：前后端数据格式不匹配 #

你前端用JSON.stringify把数据转成JSON字符串发送，contentType设为application/json，但PHP的$_POST全局变量只能解析表单格式（application/x-www-form-urlencoded）的请求，根本拿不到你发的JSON参数。
修复方案：
前端直接传普通对象，不要转JSON，也不需要单独设置contentType：

$.ajax({            
    url :"get_pos.php",
    type :"POST",
    // 直接传对象，jQuery会自动转成表单格式
    data : {
      pos_x : tmp_x,
      pos_z : tmp_z 
    },
    // 删掉原有的contentType配置

问题3：前端数据类型配置错误 #

你前端配置了dataType: "json"，要求后端返回JSON格式数据，但你的后端返回的是纯文本，浏览器解析JSON失败就会直接走error回调。
修复方案：
把dataType改成适配纯文本的类型：

dataType: "text",

问题4：PHP语法错误 #

PHP中字符串拼接用的是.不是+，你写的$_POST["pos_x"]+"/"+$_POST["pos_z"]会被当成数值加法，得到的结果完全不符合预期。

问题5：后端写入成功后无返回值 #

你写入文件成功后直接exit()，没有给前端返回任何内容，就算请求成功前端也拿不到数据。

修改后完整代码 #

前端JS部分修改后代码

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 : {
          pos_x : tmp_x,
          pos_z : tmp_z 
        },
        dataType: "text",
        success : function(text,state){
            console.log("operation reussi : "+text);
            alert("tmp : "+text);
        },
        error : function(result, state, error){
            alert("error : \n" + result.responseText);
        },
        complete : function(result, state){
          console.log(tmp_x + "/" + tmp_z)
        }
    })
}

后端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);
    // 写入成功后返回数据给前端
    echo $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();
}
?>

内容的提问来源于stack exchange，提问作者DevRipper