[solved] No $input->post data when using AJAX/axios.post()

[marcus]

Hi there,

I ran into a problem posting form data via AJAX. Of course I did some research on the topic via Google, this forum and looking into ProcessWire's core code and found the following steps...

• Setting headers to 'X-Requested-With', 'XMLHttpRequest'
• Using a trailing slash

...but to no avail. As you can see in the following code I log the response, in this case just a var_dump() of wire("input")->post, but i just get

response: object(ProcessWire\WireInputData)#240 (0) {
}

Here's my code in total. It's simplified, but should work, but for some reason does not. Could any of you point me towards the solution/my fallcy? Thanks in advance!

<?php

if (wire("config")->ajax) {
    if (wire("input")->post) {

        var_dump(wire("input")->post);

    }
} else {
    ?>
    <div id="app">
        <form action="./" method="post" v-on:submit.prevent="getFormValues">
            <label><input type="radio" name="yes_no" id="yes"
                  <?= ($page->yes_no == "1") ? "checked" : "" ?>
                          value="1"/>Ja</label>
            <label><input type="radio" name="yes_no" id="no"
                  <?= ($page->yes_no == "2") ? "checked" : "" ?>
                          value="2"/>Nein</label>
            <button type="submit">Go</button>
            <p>{{ yes_no }}</p>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>

		new Vue({
			el: '#app',
			data: {
				yes_no: '(unbeantwortet)'
			},
			methods: {
				getFormValues: function (e) {
					this.yes_no = e.target.elements.yes_no.value;

					axios.post('./', {
						yes_no: this.yes_no
					}, {
						headers: {
							'X-Requested-With': 'XMLHttpRequest',
							'Content-Type': 'application/json'
						}
					})
						.then(function (response) {
							console.log("response:", response.data);
						})
						.catch(function (error) {
							console.log("error:", error);
						});
				}
			}
		});
    </script>

<?php } ?>

// edit:

I forgot to mention that the POST request is sent (I can track it in developer tools) and it includes the data I'm intending to send. So I really assume it is a reception problem.

Edited March 8, 2018 by marcus
Mark as solved

[LostKobrakai]

ProcessWire simply does not handle data submitted as json in the request body. It does only handle the php native formats, which are what <form/> can submit.

[LostKobrakai]

Here's the bit more elaborate answer: https://processwire.com/talk/topic/16096-inputfield-ajax/?do=findComment&comment=143205

[marcus]

Thanks for the enlightenment! I obviously deal to much with Laravel lately, so I somehow ruled out this possibility....

[LostKobrakai]

Yeah most frameworks nowadays automatically parse json data into post data.

[marcus]

For anyone stumbling over this topic, here's the solution (don't forget this is not production code - sanitize your data!). Make sure you are adding the Querystring (Qs) lib somehow

					axios.post('./',
						Qs.stringify({
							yes_no: this.yes_no
						}), {
							headers: {
								'X-Requested-With': 'XMLHttpRequest',
								'Content-type': 'application/x-www-form-urlencoded'
							}
						})
						.then(function (response) {
							console.log("response:", response.data);
						})
						.catch(function (error) {
							console.log("error:", error);
						});

 

[pwFoo]

On 3/8/2018 at 10:40 AM, LostKobrakai said:

Yeah most frameworks nowadays automatically parse json data into post data.

Would be nice to have fetch() get / post handled by $input in PW.

 

@marcus

On 3/8/2018 at 10:48 AM, marcus said:

For anyone stumbling over this topic, here's the solution (don't forget this is not production code - sanitize your data!). Make sure you are adding the Querystring (Qs) lib somehow

Which library do you use?

[StanLindsey]

@LostKobrakai, @marcus - what about using "json_decode(file_get_contents("php://input"))". 

That let's you retrieve the raw data from the request body. 

http://php.net/manual/en/wrappers.php.php

 

[pwFoo]

Yes, but I can't use the PW $input, right?

 

But found a solution with FormData and without (!) Content-Type Header 

 

[StanLindsey]

Yeah, that doesn't come through on the $input variable, so you'd have to grab it yourself. I've pushed a PR to include it in the $input variable as it makes sense for ProcessWire to support that out of the box. @ryan

[pwFoo]

With FormData added to the fetch call $input / $_POST is populated! So with fetch it can be fixed at client side.

[marcus]

On 7/7/2018 at 8:04 AM, pwFoo said:

Would be nice to have fetch() get / post handled by $input in PW.

 

@marcus

Which library do you use?

• VueJS
• Axios
• https://www.npmjs.com/package/query-string

In this case