do HTTP requests and send params

How-to Discussions
1

Hi Fusers! Im trying to pass 2 params to a php web service which returns a json. I’ve do this with native android and its working fine.

This is mainView.js.

var Observable = require("FuseJS/Observable");var username = Observable("");var password = Observable("");
function signup(arg) {

                var requestObject = {"Email":username.value, "Password":password.value};

                var status = 0;
                var response_ok = false;
                var x = '';
                var y = '';

                fetch('http://abc.com/api/user/user_login', {
                    method: 'POST',
                    headers: { "Content-type": "application/json"},
                    dataType: 'json',
                    body: JSON.stringify(requestObject)
                }).then(function(response) {
                    status = response.status;  // Get the HTTP status code
                    response_ok = response.ok; // Is response.status in the 200-range?
                    return response.json();    // This returns a promise
                }).then(function(responseObject) {
                    console.log("Success");
                    x = JSON.stringify(responseObject);
                    y = JSON.stringify(requestObject);
                    console.log(x);
                    console.log(y);

                    /for (var key in responseObject) {
                        console.log(key + ' : ' + responseObject[key]);
                    }
                    /

                }).catch(function(err) {
                    console.log("lol Error");
                    console.log(err.message);
                });

}

module.exports = {
  username: username,
  password: password,
  signup: signup
};

This is the Monitor output

file
YoThXh7VXlxA-legacy-files-oREh0rfKWsK3SJwO-_I-2TXW5Sp7za_Ayw5mXi91E.JPG691×575

More on Fetch: POST json data - http://goo.gl/rXzpmH

Also I wanna check the result and go to a whole different screen. How can I do it??

2

It seems you get a 404 status code error. Are you sure your url is correct?

3

I can’t find dataType: 'json' as part of the spec, so could you try to remove that?

4

Hi Anders,

URL is totally correct, Aslo I tried without dataType: ‘json’ it also didn’t worked.

I’m doubtful about this line -> var requestObject = {“Email”:username.value, “Password”:password.value};

What do you think?

5

It seems like you’ve asked two questions.

For the first one:

Hi Fusers! Im trying to pass 2 params to a php web service which returns a json. I’ve do this with native android and its working fine.

I misunderstand, from your original post it appears the POST using fetch actually works properly? From your monitor and output code it looks just fine to me. Can you confirm that it works, or do you need help getting that part to work?

For the second part:

Also I wanna check the result and go to a whole different screen. How can I do it??

This part is fairly easy; the way to do it is to create an Observable that will contain the name of the current page you want to go to. Then you can bind a Navigation or PageControl’s Active property to that Observable, and you should be good to go. Our Tab bar navigation example shows how to do this. An even simpler example (that also fetches data and then changes pages when it arrives) would look like this:

<App Theme="Basic">
    <Panel>
        <JavaScript>
            var Observable = require("FuseJS/Observable");

            var currentPage = Observable("firstPage");
            var data = Observable("data");

            fetch("http://jsonplaceholder.typicode.com/posts/1&quot;)
                .then(function(result) {
                    return result.json();
                }).then(function(resultData) {
                    data.value = resultData.body;
                    currentPage.value = "secondPage";
                });

            module.exports = {
                currentPage: currentPage,
                data: data
            };
        </JavaScript>

        <LinearNavigation Active="{currentPage}" />

        <Style>
            <Page>
                <EnteringAnimation>
                    <Move X="-1" RelativeTo="ParentSize" />
                </EnteringAnimation>
                <ExitingAnimation>
                    <Move X="1" RelativeTo="ParentSize" Duration="0.5" />
                </ExitingAnimation>
            </Page>
        </Style>

        <Page ux:Name="firstPage">
            <Text Alignment="Center">Fetching data...</Text>
        </Page>

        <Page ux:Name="secondPage">
            <StackPanel Alignment="Center">
                <Text Alignment="Center" Margin="0,0,0,10">Data fetched!</Text>
                <Text TextWrapping="Wrap" Value="{data}" />
            </StackPanel>
        </Page>
    </Panel>
</App>

Hope that helps!

6

Hi Jake,

Still the first part is not working. It always sends an error code, not a success message. I said “I’ve do this with native android and its working fine” is just to make sure the url and the parameters are correct.

I’m not sure about this line,

var requestObject = {“Email”:username.value, “Password”:password.value};

Is this correct? I meant the way I’m binding the parameters?

Thanks!

7

That seems correct to me, does it work if you hardcode the values in your requestObject, like {"Email":"someemail", "Password": "somepassword"};.

8

Yeah I did that also, That also give the same error.

9

Did you find a solutions for this? I am having same issue. 404 while everything looks correct!