Jump to content

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


marcus
 Share

Recommended Posts

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.

Bildschirmfoto-2018-03-08-um-10_10_19.jpg.86311d2eeb8c88545e4b6dd1074a22e2.jpg

Edited by marcus
Mark as solved
Link to comment
Share on other sites

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);
						});

 

  • Like 3
Link to comment
Share on other sites

  • 3 months later...
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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...