{"id":12190,"date":"2019-08-06T17:03:00","date_gmt":"2019-08-06T15:03:00","guid":{"rendered":"https:\/\/pi3g.com\/?p=12190"},"modified":"2019-08-06T17:03:00","modified_gmt":"2019-08-06T15:03:00","slug":"getting-post-requests-to-work-with-axios-kemal-crystal-lang-vue-js","status":"publish","type":"post","link":"https:\/\/pi3g.com\/de\/getting-post-requests-to-work-with-axios-kemal-crystal-lang-vue-js\/","title":{"rendered":"POST-Anfragen mit Axios, Kemal (crystal lang), vue.js zum Laufen bringen"},"content":{"rendered":"

In picockpit.com, I am using AJAX requests to communicate with the backend for update operations. For instance,<\/p>\n

\"image\"<\/a><\/p>\n

if you want to change the name of this Pi, you would select:<\/p>\n

\"image\"<\/a><\/p>\n

which shows an inline form:<\/p>\n

\"image\"<\/a><\/p>\n

how to show this inline form with vue.js is besides the point of this post (even though very interesting!)<\/p>\n

Clicking on Cancel will cancel the renaming, clicking on OK will initiate an AXIOS request, which will talk to the backend. <\/p>\n

Here\u2019s the JS code:<\/p>\n

\n

commitEdit: function (event) {
     let name = this.name;
     let serial = this.serial;
     let pointer = this;
     this.renameSpinnerMode = true;
     axios.post(‘\/mypis\/’ + serial + ‘\/changename’,
         {
             name: name
     })
     .then(function (response) {
         pointer.renameMode = false;
         pointer.renameSpinnerMode = false;
         pointer.backupName = pointer.name;
     })
     .catch(function (error) {
         info(“Sorry, name of ” + ‘”‘ + pointer.backupName  + ‘”‘ + ” could not be changed. ” + error );
         pointer.name = pointer.backupName;
         pointer.renameMode = false;
         pointer.renameSpinnerMode = false;
       });
\n}<\/p>\n

\n<\/p>\n<\/blockquote>\n

As you can see, I am using the default axios syntax which is suggested.<\/p>\n

Furthermore, I am passing in a pointer (\u201cpointer\u201d) to \u201cthis\u201d (this referring to the Vue.js component!), so that I can modify the component\u2019s state in the callbacks from Axios.<\/p>\n

In the Kemal powered backend, I have this code:<\/p>\n

\n

post “\/mypis\/:serial\/changename” do |env|
     returncode = 400
     (\u2026)
     newname = “”
     serial = “”<\/p>\n

     if env.params.url.has_key?(“serial”)
         serial = env.params.url[“serial”].not_nil! if !env.params.url[“serial”].nil?
         json_raw = env.request.body.as(IO).gets_to_end
         data = Hash(String, String).from_json(json_raw)
         if data.has_key?(“name”)
             newname = data[“name”].not_nil!
         end
     end<\/p>\n

<\/p>\n

(\u2026)<\/p>\n

end<\/p>\n<\/blockquote>\n

As you can see, we are actually receiving the data JSON encoded!<\/strong><\/p>\n

That was the big problem before, I was trying to receive the data form-encoded (env.params.body[\u201cname\u201d]) in Kemal, and not JSON encoded! <\/p>\n

In case the data is JSON encoded, env.params.body will be empty!<\/p>\n

It is much easier to switch the backend implementation to handle JSON, than to try and convince AXIOS to encode the data as a form.<\/p>\n

Axios \u201cparams\u201d solution<\/h1>\n

By the  way, often on the web you will find the suggestion to set the params key for Axios. This is bad in my opinion, as it will actually encode the data as part of the URL.<\/p>\n

You would have to rewrite the URL to get the query string, and interpret the data in Kemal. <\/p>\n

And: the URL is subject to a lenght limitation. <\/p>\n

Therefore, with POST requests, the parsing JSON route is the more solid one, IMHO.<\/p>\n

We are for hire \u2013 consulting, development, project management \u2026 <\/h1>\n

Daily rate: 1500 \u20ac net. If you are looking for a flexible developer with a focus on the Raspberry Pi, we might be a good fit for you.<\/p>\n

Contact us.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

In picockpit.com verwende ich AJAX-Anfragen zur Kommunikation mit dem Backend f\u00fcr Aktualisierungsvorg\u00e4nge. Wenn Sie z. B. den Namen dieses Pi \u00e4ndern m\u00f6chten, w\u00e4hlen Sie:, was ein Inline-Formular anzeigt: Wie man dieses Inline-Formular mit vue.js anzeigt, ist nicht Gegenstand dieses Beitrags (auch wenn es sehr interessant ist!)...<\/p>","protected":false},"author":830,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[416,666],"tags":[668,409,671,670,495,669,667],"class_list":["post-12190","post","type-post","status-publish","format-standard","hentry","category-crystal-language","category-vue-js","tag-axios","tag-crystal","tag-form-encoded","tag-json","tag-kemal","tag-post","tag-vue"],"_links":{"self":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts\/12190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/users\/830"}],"replies":[{"embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/comments?post=12190"}],"version-history":[{"count":1,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts\/12190\/revisions"}],"predecessor-version":[{"id":12191,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts\/12190\/revisions\/12191"}],"wp:attachment":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/media?parent=12190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/categories?post=12190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/tags?post=12190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}