如何将jQuery Ajax返回结果填充到HTML表单起始价格输入框

我看了你的代码，问题主要出在jQuery设置输入框值的方法错误，还有一点是后端PHP变量和前端JS变量的混淆，下面给你一步步解决：

核心问题分析 #

• 你用了$("#input").value(data)来设置输入框值，但jQuery对象并没有.value()方法，正确的写法是.val()，这是导致值无法填充的直接原因。
• 你在start price输入框的value属性里写了<?php echo $test; ?>，这里的$test是PHP后端变量，和你前端JS里定义的var test = data;完全不相关，后端渲染页面时这个变量不存在，所以这个地方不需要用PHP输出，让JS来填充即可。

修正后的完整代码 #

<?php if (isset($_GET['var_PHP_data'])) { echo $_GET['var_PHP_data']; } else { ?>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
$(document).ready(function() {
    $('#sub').click(function(e) {
        // 阻止按钮默认的提交行为，避免页面刷新
        e.preventDefault();
        var var_data = "Hello World";
        $.ajax({
            url: 'load-data1.php',
            type: 'GET',
            data: { var_PHP_data: var_data },
            success: function(data) {
                console.log(data);
                var test = data;
                console.log(test);
                // 改用jQuery的val()方法设置输入框值
                $("#input").val(data);
                $('#result').html(data);
            }
        });
    });
});
</script>
</head>
<body>
<input type="submit" value="Submit" id="sub"/>
<form method = "post">
buy or sell :<select name="trade_sort">
<option value="Buy">Buy</option>
<option value="Sell">Sell</option>
</select>
select currency pair :<select id="curr_pair" name="curr_pair">
<option value="EURUSD">EUR/USD</option>
<option value="GBPUSd">GBP/USD</option>
<option value="USDJPY">USD/JPY</option>
<option value="EURGBP">EUR/GBP</option>
<option value="USDCAD">USD/CAD</option>
<option value="AUDUSD">AUD/USD</option>
<option value="EURJPY">EUR/JPY</option>
<option value="GBPEUR">GBP/EUR</option>
<option value="USDCFH">USD/CFH</option>
<option value="EURCFH">EUR/CFH</option>
</select>
Trade Date :<input type="text" name="date1" id="date1" alt="date" class="IP_calendar" title="Y/m/d">
Amount :<input type="number" min="0" value="1000" step="1.0" name="amount">
stoploss :<input type="number" min="0.00" value="0.00" step="0.01" name="stoploss">
<!-- 移除无效的PHP变量输出，由JS动态填充值 -->
start price :<input id ="input" type="number" min="0" value="" step="0.00001" name="start_price">
<input type="hidden" name="closingDate" id="closingDate">
<input type="hidden" name="status" id="status">
<input type="hidden" min="0" value="1.0000" step="0.01" name="pip">
<input type="hidden" min="0" value="1.0000" step="0.01" name="pl1">
<input type="hidden" min="0" value="1.0000" step="0.01" name="pl2">
<input type="hidden" min="0" value="1.0000" step="0.01" name="multiplier" id="multiplier">
<input type="submit" name="gg" value ="save trade">
<!-- 确保结果展示容器存在 -->
<div id="result"></div>
</form>
</body>
</html>
<?php } ?>

额外优化说明 #

• 给点击事件添加了e.preventDefault()，防止按钮默认的表单提交行为导致页面刷新，保证AJAX请求能正常完成。
• 移除了原代码中多余的</select>标签，修复了HTML结构错误。
• 清空了start price输入框的默认PHP输出，让JS完全控制这个输入框的值。

这样修改后，点击Submit按钮，load-data1.php返回的值就会正确填充到start price输入框里了。

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