javascript - 如何在按键时在没有表单的情况下在数据库中创建记录

Question

我正在使用Rails，并且正在构建一个创建新“人”(人/新)的页面。 使用 javascript，我扫描包含用户输入的页面，最终得到一个如下所示的 javascript 对象:

obj = { name: "John", age: 30, city: "New York" };

我想添加一个事件监听器(按键 q)，将该哈希值保存到数据库中，如下所示:

  create_table "people", force: :cascade do |t|
    t.string "name"
    t.integer "age"
    t.string "city"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

尽管我有扫描的输入，但没有表格。

我知道如何 JSON.stringify 并且我知道 eventListeners 如何工作，但我不确定如何将字符串化对象从 javascript 发送到 ruby​​ 代码，并将其保存到数据库。

这是我迄今为止所做的Javascript: 应用程序/ Assets /javascript/testing.js

addEventListener('keyup', event => {
    if (event.key === "q") {
        var array = []
        var inputs = document.querySelectorAll("input")
        inputs.forEach ((input) => {
            array.push(input.value)
        })
        var name = array[0]
        var age = array[1]
        var city = array[2]

        var hash = {}
        hash["name"]= name
        hash["age"]= age
        hash["city"]= city
        var stringified = JSON.stringify(hash)
    }
} )

这是我的 Controller 的样子:

class PeopleController < ApplicationController

  def index
    @people = Person.all
  end

  def new
    @person = Person.new
  end

  def create
    Person.create(person_params)
  end

  private

  def person_params
    params.require(:person).permit(:name, :age, :city)
  end
end

我期望的是，当按下“q”键时，输入中存在的任何内容都会保存到数据库中

Answer 1

addEventListener('keyup', event => {
    if (event.key === "q") {
        var array = []
        var inputs = document.querySelectorAll("input")
        inputs.forEach ((input) => {
            array.push(input.value)
        })
        var name = array[0]
        var age = array[1]
        var city = array[2]

        var hash = {}
        hash["name"]= name
        hash["age"]= age
        hash["city"]= city
        var stringified = JSON.stringify(hash)

        // Using Javascript
        fetch('/people', {
           method: 'POST',
           user_params: stringified
        })
        .then((resp) => resp.json())
        .then(function (data) {
          console.log(data)
        })
        .catch(function (error) {
           console.log(error)
        })                    
    }
} )

peoples_controller.rb

  def create
    Person.create(name: params[:user_params][:name], age: params[:user_params][:name], city: params[:user_params][:city])
  end