使用 ajax 表单提交更新页面元素而不刷新

Question

我在同一页面上有一个带有嵌套属性和 html 列表元素的表单。我正在使用 AJAX 请求处理表单提交。提交时我想留在同一页面并更新列表以显示刚刚提交的项目而不刷新页面。

下面的代码显示了提交处理程序的 javascript。我希望能够使用 jquery 将表单数据附加到列表中，但我运气不佳。我试过使用 rails 不显眼的 javascript 但在这种情况下也无法做到这一点。

如有任何帮助，我们将不胜感激。

$('#new_box').submit(function(event){
    event.preventDefault();

    var cube = newCube($("#box_name").val(), 25, 25, 25);
    addCube(cube);

    var data = {};
    data["box"] = {};
    data["box"]["x"] = cube.position.x;
    data["box"]["y"] = cube.position.y;
    data["box"]["z"] = cube.position.z;

    var formData = $(this).serialize() + '&' + $.param(data);

    var locker_id = $('#my-canvas').data('locker').id;

    $.ajax({
      url: '/lockers/' + locker_id + '/boxes',
      method: 'post',
      dataType: 'json',
      data: formData,
      error: function(){
        alert("Could not add box!");
      },
      success: function(data){
        $('.box-list').append(formData);
      }
    });

  });

部分名单如下：

<ul class="list-group box-list">
    <li class="list-group-item box" id="<%= dom_id(box) %>" data-box="<%= box.to_json %>">
      <%= link_to box.name, "javascript:void(0)" %>
      <span class="badge"><%= box.items.count %></span>
      <ul class="list-group box-items">
        <% box.items.each do |item| %>
        <li class="list-group-item"><%= item.name %></li>
        <% end %>
      </ul>
    </li> 
</ul>

Answer 1

$('.box-list').append($(data).children());

Answer 2

我最终将 ajax 响应呈现为 html 部分，然后将该部分附加到 ajax 请求的成功块中。

控制器：

respond_to do |format|
      if @box.save
        @item = Item.new
        format.html { render partial: 'boxes/box_list', locals: { box: @box } }
      end
    end

javascript:

$.ajax({
      url: '/lockers/' + locker_id + '/boxes.html',
      method: 'post',
      data: formData,
      error: function(){
        alert("Could not add box!");
      },
      success: function(response){
        $('.box-list').append(response);
        $('input[type=text]').val('');
      }
    });

使用 ajax 表单提交更新页面元素而不刷新

update page elements without refresh using ajax form submit

javascript

jquery

ruby-on-rails

ajax

ajaxform