AJAX获取价格后无法显示到Span，如何实现显示并隐藏输入框？

嘿，这问题其实很简单，你已经迈过了最关键的一步——成功获取到价格数据，剩下的就是把数据放到span里，再把输入框藏起来就行！我给你一步步拆解：

1. 调整HTML结构 #

首先，把输入框隐藏（别删掉，说不定后续提交表单还能用到它的value），同时给负责显示价格的span加一个唯一ID，方便JS精准定位。修改后的HTML大概是这样：

<!-- 用display:none隐藏输入框，保留初始价格作为备用 -->
<input type="text" id="price-input" placeholder="{{$product->price}}" value="{{$product->price}}" style="display: none;">
<div id="price">
  <!-- 给span加ID，默认显示商品初始价格 -->
  <span id="price-display" class="text-muted">{{$product->price}}</span>
</div>

2. 修改AJAX回调逻辑 #

不管你用原生JS还是jQuery，核心都是在AJAX请求成功后，把拿到的新价格赋值给刚才加了ID的span。这里给你两种常见写法：

如果你用jQuery的AJAX： #

// 假设触发价格更新的事件是选择商品尺寸（比如下拉框的change事件）
$('select.size-option').on('change', function() {
  const selectedSize = $(this).val();
  
  $.ajax({
    url: '/your-price-api-url', // 替换成你的价格接口地址
    method: 'GET',
    data: { size: selectedSize }, // 传递选中的尺寸参数
    success: function(response) {
      // 假设接口返回的价格字段是response.price，根据实际情况调整
      const newPrice = response.price;
      // 更新span的显示内容
      $('#price-display').text(newPrice);
      // 同步更新隐藏输入框的value（如果后续需要提交这个价格）
      $('#price-input').val(newPrice);
    },
    error: function() {
      // 请求失败时，显示初始价格兜底
      $('#price-display').text($('#price-input').val());
    }
  });
});

如果你用原生JS的AJAX： #

const sizeSelect = document.querySelector('select.size-option');
const priceDisplay = document.getElementById('price-display');
const priceInput = document.getElementById('price-input');

sizeSelect.addEventListener('change', function() {
  const selectedSize = this.value;
  const xhr = new XMLHttpRequest();
  
  xhr.open('GET', `/your-price-api-url?size=${selectedSize}`, true);
  xhr.onload = function() {
    if (this.status === 200) {
      const response = JSON.parse(this.responseText);
      const newPrice = response.price;
      priceDisplay.textContent = newPrice;
      priceInput.value = newPrice;
    } else {
      // 请求失败时回退到初始价格
      priceDisplay.textContent = priceInput.value;
    }
  };
  
  xhr.send();
});

3. 注意事项 #

• 确保span的ID（price-display）和JS里的选择器完全一致，别写错字
• 检查AJAX返回的价格字段是否正确，比如你的接口可能返回的是response.data.price，要根据实际返回结构调整
• 如果需要给价格加样式，直接给span的text-muted类或者新增CSS类就行，不影响功能

这样调整后，页面加载时会显示默认的{{$product->price}}，当用户选择不同尺寸触发AJAX后，新价格会自动更新到span里，输入框则全程隐藏，完全符合你的需求～

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