Question

我试图在Ruby Sinatra项目中使用Axios。在我的ruby文件中定义了一个URL。

post '/follow/:id' do
# do something
end

在我的erb文件中，我试图将变量传递给我的内联脚本。

<body>
    <div id="follow_element">
        <button v-on:click="followUser">Follow</button>
    </div>

    <script>
        window.addEventListener('load', function(){
            const app = new Vue({
                el: "#follow_element",
                methods:{
                    followUser(){
                        axios.post("/follow", {
                            params: {
                                id: <%= @user.id %>
                            }
                        })
                    }
                }
            })
        })
    </script>
</body>

我想要的是，如果用户单击按钮，应用程序将按/ follow /：id网址以更新结果。但是，我遇到了两个问题。首先，<％= @ user.id％>不起作用（@user是此erb中可用的变量）。第二个是应用程序点击了“ / follow”端点，而不是“ / follow /：id”端点。

能给我一些建议吗？非常感谢。

Answer 1

请注意，在您撰写本文时：

post '/follow/:id' do
# do something
end

您现在将接受POST请求，例如：/follow/oneRandomId，follow/124184965等...

就在这里，您正在向/follow发送请求，并传递不在url中的POST参数。这将不起作用：

axios.post("/follow", {
  params: {
    id: <%= @user.id %>
  }
})

为了解决该问题，您可以使用可用的@user.id生成一个URL并发出POST请求，如下所示：

axios.post("/follow/<%= @user.id %>")

或者，如果您要将一些数据（POST数据，而不是URL参数）传递给用户，则可以执行以下操作：

axios.post("/follow/<%= @user.id %>", {
  name: 'A beautiful name to insert to an user with that ID'
})

如果您仍然遇到问题，也可以使用axios README page中的axios(config)，我想更清楚地知道它在做什么：

axios({
  method: 'post',
  url: "/follow/<%= @user.id %>",
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

如何在axios网址中传递参数？

1 个答案: