javascript - 提交表单时，我不断收到 nil 值

Question

我遇到了这个问题，当我在表单中输入一个值时，值将变为 nil，因此它没有保存正确的值。

这是我提交所有者表单时的示例。

它没有显示我的参数

<ActionController::Parameters {} permitted: true>

然后这里是后端返回的参数值

#<Owner id: 19, name: nil, phone_number: nil, real_estate_agent: nil, created_at: "2020-11-11 22:52:58", updated_at: "2020-11-11 22:52:58">

这是我浏览器前端的示例控制台响应。顺便说一句，与上述无关

Object { id: 11, name: null, phone_number: null, real_estate_agent: null, properties: [] }

这是我的所有者表格

 <form id = "owner_form">
        <div>
          <label for='name'>Owner Name:</label>
          <input type='text' id='name' name='name' placeholder="John Doe" />
        </div>
        <div>
          <label for='phone_number'>Phone Number:</label>
          <input type='text' id='phone_number' name='phone_number' placeholder="Phone Number" />
        </div>
        <div>
          <label for='real_estate_agent'>Listing Agent:</label>
          <input type='text' id='real_estate_agent' name='real_estate_agent' placeholder="Agent"/>
        </div>
        <div>
          <input type='submit' id='owner_submit' value='Submit'/>
        </div>
      </form>
    

然后在我的 JavaScript 中，这就是我发布数据的方式。

ownerForm.addEventListener('submit',(event)=> {
event.preventDefault();
OwnerForm()
dropdownMenu()
ownerForm.reset()

})

function OwnerForm(){
  
  let name = document.getElementById('name').value
  let phone_number = document.getElementById('phone_number').value
  let real_estate_agent = document.getElementById('real_estate_agent').value

  

  let owner = {
    name: name, 
    phone_number: phone_number,
    real_estate_agent: real_estate_agent
  }

  let config ={
    method: 'post',
    body: JSON.stringify(owner),
    header: {
      'Content-Type': 'application/json',
        "Accept": "application/json"
    }
  }
  
  
  fetch(OWNERS_URL, config)
  
  
  
}

然后在这里使用表单值指向的强大参数在后端“创建”操作。

class OwnersController < ApplicationController

 def create
        
            owner = Owner.create(owner_params)
          

            if owner.save
                render json: owner
            end
        

    end

 private 

    

    def owner_params
        params.permit(:name,:phone_number,:real_estate_agent)
    end

end

我已经确保我的键和变量在前端和后端都是相同的以保持一致性，但我目前无法解释这种行为，并且想知道是否有人可以帮助我解释我需要更正的内容。

标签： javascripthtmlruby-on-rails

Answer 1

我可以在这里提供一个提交邮政编码：

    function submitPost() {
function submitPost() {
            let textArea = document.getElementById("input-textarea")
            let counter = document.getElementById("input-characters")
            let contentToPost = textArea.value;
            
            if(contentToPost.length === 0) {
                return false;
            }
            
            textArea.value = "";
            counter.innerText = 0;
            
            createPostHTML(contentToPost)
            return false;
        }
        let currentPostId = 1;
        function createPostHTML(postContent) {
            let now = new Date()
            let time = now.toLocaleTimeString()
            let date = now.toLocaleString()
            let name = ""
            let username = ""
            
            currentPostId = currentPostId + 1
            
            postContent = postContent.replace(/</g, "&lt;")
            postContent = postContent.replace(/\n/g, "<br />")
            postContent = postContent.replace(/(https?:\/\/[^\s]+)/g, "<a href=\"$1\" target=\"_blank\">$1</a>")
            
            let template = `
                <article id="article-container-${currentPostId}">
                    <header>
                        <h1>${name}</h1>
                        <h2>@${username}</h2>
                    </header>
                    <blockquote>
                        ${postContent}
                    </blockquote>
                    <hr/>
                    <footer>
                        <p class="date-posted">Posted
                            <time>${date}</time>
                        </p>
                    </footer>
                </article>`
            document.getElementById("form-container").insertAdjacentHTML("afterend", template)
        }               let textArea = document.getElementById("input-textarea")
                let counter = document.getElementById("input-characters")
                let contentToPost = textArea.value;
                
                if(contentToPost.length === 0) {
                    return false;
                }
                
                textArea.value = "";
                counter.innerText = 0;
                
                createPostHTML(contentToPost)
                return false;
            }
            let currentPostId = 1;
            function createPostHTML(postContent) {
                let now = new Date()
                let time = now.toLocaleTimeString()
                let date = now.toLocaleString()
                let name = ""
                let username = ""
                
                currentPostId = currentPostId + 1
                
                postContent = postContent.replace(/</g, "&lt;")
                postContent = postContent.replace(/\n/g, "<br />")
                postContent = postContent.replace(/(https?:\/\/[^\s]+)/g, "<a href=\"$1\" target=\"_blank\">$1</a>")
                
                let template = `
                    <article id="article-container-${currentPostId}">
                        <header>
                            <button class="close" onclick="deletePost(${currentPostId})">
                            </button>
                            <h1>${name}</h1>
                            <h2>@${username}</h2>
                        </header>
                        <blockquote>
                            ${postContent}
                        </blockquote>
                        <hr/>
                        <footer>
                            <p class="date-posted">Posted
                                <time>${date}</time>
                            </p>
                        </footer>
                    </article>`
                document.getElementById("form-container").insertAdjacentHTML("afterend", template)
            }

以及提交按钮：

<button class="compose" onclick="submitPost()">
            <img src="" height="30" width="30"/>
        </button>