Rails中使用无表单自定义Ajax请求时数据无法插入数据库

从你的代码里能看到几个关键问题，我帮你逐一排查并修复：

1. 事件选择器不匹配 #

你的视图里link_to的class是add-list，但Ajax代码里绑定的是.add，点击事件根本触发不了！这是最基础的错误。

2. Ajax请求的URL未正确定义 #

你写的url: action里action变量没有定义，在Rails里创建任务列表的POST路由应该是task_lists_path（可以通过rails routes命令确认）。

3. 未传递符合Rails参数格式的数据 #

Rails默认期望参数是嵌套结构（比如task_list[user_id]这种格式），你需要把数据打包成对应的结构，不然控制器接收不到参数。

4. 缺少阻止默认行为 #

link_to默认是GET请求，即使你写了Ajax，也要阻止默认的跳转行为，否则会干扰Ajax请求。

修正后的完整代码 #

视图代码（View） #

<div class="col-md-12">
  <input value="<%= session[:user_id]%>" id="user_id" hidden>
  <!-- 补充输入框，否则无法获取list名称 -->
  <input type="text" class="new-list" placeholder="Enter list name">
  <%= link_to "Add New", new_task_list_path, :remote => true, :class =>"btn btn-xs add-list" %>
</div>

Ajax代码 #

$(document).on('click','.add-list', function(e){
  // 阻止link_to默认的GET跳转行为
  e.preventDefault();
  
  const userId = $('#user_id').val();
  const name = $('.new-list').val();
  const currentButton = $(this);

  if(name.trim()){ // 过滤空字符串输入
    $.ajax({
      method: 'POST',
      url: '<%= task_lists_path %>', // 用Rails路由助手生成正确的POST地址
      dataType: 'json',
      data: {
        task_list: { // 嵌套参数，匹配Rails强参数要求
          user_id: userId,
          name: name
        },
        // 带上CSRF令牌，避免被Rails拦截请求
        authenticity_token: '<%= form_authenticity_token %>'
      },
      success: function(response){
        // 请求成功后的操作示例：清空输入框、提示成功
        console.log('List added successfully:', response);
        currentButton.closest('.col-md-12').find('.new-list').val('');
      },
      error: function(xhr){
        // 错误处理，方便排查问题
        console.error('Error adding list:', xhr.responseText);
      }
    });
  } else {
    alert('Please enter a valid list name!');
  }
});

额外需要检查的点 #

• 控制器强参数：确保TaskListsController的create方法配置了正确的强参数：

  def create
    @task_list = TaskList.new(task_list_params)
    if @task_list.save
      render json: @task_list, status: :created
    else
      render json: @task_list.errors, status: :unprocessable_entity
    end
  end
  
  private
  def task_list_params
    params.require(:task_list).permit(:user_id, :name)
  end
  

• 路由确认：运行rails routes命令，确认POST /task_lists对应的路由助手是task_lists_path，如果你的资源命名不同，要对应修改。
• CSRF令牌：如果不想在Ajax里硬编码令牌，也可以通过页面meta标签获取：$('meta[name="csrf-token"]').attr('content')。

这样调整后，你的Ajax POST请求应该就能正常把数据插入数据库了。

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