Question

以下代码来自我在Udemy上做的教程。知道为什么用.replaceWith替换整个表单而不是将AJAX响应弹出到自己的指定区域？

似乎不必要地复杂化了。我错过了什么？

所以这是发送AJAX请求的表单

<div id="stock-lookup">

  <%= form_tag search_stocks_path, remote: true, method: :get, id:'stock-lookup-form' do %>
    <div class="form-group row no-padding text-center col-md-12">
      <div class="col-md-10">
        <%= text_field_tag :stock,
                           params[:stock],
                           placeholder: 'Stock Ticker Symbol',
                           autofocus: true,
                           class: 'form-control search-box input-lg' %>
      </div>
      <div class="col-md-2">
        <%= button_tag(type: :submit, class: 'btn btn-lg btn-success') do %>
            <i class="fa fa-search"></i>Look up a stock
        <% end %>
      </div>
    </div>
  <% end %>

    <%= render 'common/spinner' %>

  <% if @stock %>
    <div id="stock-lookup-results" class="well results-block">
      <strong>Symbol: </strong> <%= @stock.ticker %>
      <strong>Name: </strong> <%= @stock.name %>
      <strong>Price: </strong> <%= @stock.price %>
    </div>
  <% end %>

  <div id="stock-lookup-errors"></div>

</div>

以及处理它的js

var init_stock_lookup;

init_stock_lookup = function() {
    ...
    $('#stock-lookup-form').on('ajax:success', function(evt, data, stat) {
        $('#stock-lookup').replaceWith(data);
        init_stock_lookup();
    });

    $('#stock-lookup-form').on('ajax:error', function(evt, xhr, stat, err) {
        hide_spinner();
        $('#stock-lookup-results').replaceWith('');
        $('#stock-lookup-errors').replaceWith('Stock was not found.');
    });

};

$(document).ready(function() {
    init_stock_lookup();
});

Answer 1

如您所知，似乎整个表单都被查找结果替换。这是一种设计选择，使页面感觉互动，而无需重新加载整个页面。我个人不会这样做，因为它限制了多个后续查找。但是，这种方法可以用来引导用户通过交互逻辑。

在用结果替换另一个元素方面，很容易创建另一个元素并将其插入到表单之后。

为什么这段代码使用.replaceWith而不仅仅是.html

1 个答案: