如何通过jQuery Ajax将PHP多echo值返回到多文本框

你现在的问题核心在于：PHP直接连续echo两个字符串时，前端拿到的是拼接后的一串内容（比如johnusa），根本没法区分哪个是名称、哪个是位置。最稳妥的解决方案是用JSON格式返回结构化数据，让前后端的交互更清晰可靠。

第一步：修改PHP代码，返回JSON结构化数据 #

把需要返回的字段整理成数组，用json_encode()转换成JSON字符串，同时设置响应头明确告诉前端这是JSON数据：

<?php
// 先设置响应头为JSON格式，确保前端能正确解析
header('Content-Type: application/json');

$data = $_POST['data1'];
$data2 = "h";

if ($data2 == $data) {
    // 把要返回的名称和位置放到数组里
    $response = [
        'name' => 'john',
        'location' => 'usa'
    ];
} else {
    $response = [
        'error' => 'Error'
    ];
}

// 输出JSON格式的响应内容
echo json_encode($response);
?>

第二步：修改前端Ajax代码，解析JSON并填充文本框 #

在Ajax请求里指定dataType: 'json'，jQuery会自动把返回的JSON字符串转换成JS对象，你直接提取对应字段赋值给文本框就行：

<input type="text" id="name"> 
<input type="text" id="location"> 
<button id="submit">Click</button> 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script> 
$(document).ready(function() { 
    $("#submit").click(function() { 
        var a = "h"; 
        $.ajax({ 
            url: "你的PHP文件路径", // 替换成实际的PHP文件地址
            type: "POST",
            data: { data1: a }, // 把参数传递给PHP
            dataType: "json", // 声明期望返回JSON格式数据
            success: function(response) {
                // 先判断是否有错误
                if (response.error) {
                    alert(response.error);
                    // 清空输入框
                    $('#name').val('');
                    $('#location').val('');
                } else {
                    // 把对应字段填充到文本框
                    $('#name').val(response.name);
                    $('#location').val(response.location);
                }
            },
            error: function() {
                alert('请求出错，请稍后重试');
            }
        });
    });
});
</script>

为什么不推荐用分隔符拆分？ #

可能有人会想到在PHP里echo "john,usa"，然后前端用split(',')拆分字符串。但这种方式非常脆弱——如果返回的内容本身包含分隔符（比如名称是john,doe），拆分逻辑直接就崩了。而JSON是标准的结构化数据格式，能完美处理各种复杂内容，是前后端交互的首选方案。

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