1

I am using node.js and Express.js on the back end, and am trying to make a server call from the client via AJAX.

So I have this POST request that works fine with AJAX:

node.js/Express.js:

app.post('/createNewThing', function(req, res) {
    var userInput = req.body.userInput;
    if (userInput) {
        res.send('It worked!');
    }
});

Client Side/AJAX request:

var userInputForm = $('#userInputForm.val()')
$.ajax({
    url: "/createNewThing",
    type: "POST",
    data: "userInput=" + userInputForm,
    dataType: "text",
        success: function(response, status, http) {
            if (response) {
                console.log('AJAX worked!);
            }
        }
    });

The userInputForm comes from an HTML form.

This POST request works fine. But I want to change this to a GET request. If I change app.post to app.get, and change type in the AJAX call to GET, I get this 500 error:

GET /createNewThing?userInput= 500

MonkeyOnARock
  • 2,151
  • 7
  • 29
  • 53
  • Nothing in the code you have explains why the value of `userInputForm` changes from whatever unspecified value you had before to `" 500"`. – Quentin Oct 31 '16 at 09:03
  • I've edited it to hopefully make it clearer. It's not changing the `userInputForm` to a value of 500; the 500 is just the error code (it's how it prints it on my command prompt). – MonkeyOnARock Oct 31 '16 at 09:06
  • Well, it looks like the value is just blank then (and presumably a blank value throws a 500 in your server side code, which you haven't shown us). There's no reason that the changes you said you made would change the value of `userInputForm` at all. – Quentin Oct 31 '16 at 09:07
  • In the example I've provided, yes the value is blank. But the value could be anything, and it still gives the error. Then, there may be something in my code I am missing. I will keep looking. Thanks. – MonkeyOnARock Oct 31 '16 at 09:09
  • An internal server error indicates that the problem (even if the problem is "The client is sending bad data and it isn't being handled cleanly) definitely lies with the server side code you haven't included in the question. – Quentin Oct 31 '16 at 09:15
  • Okay, I've added the server side code that runs in the `app.post` request. I probably should have done that the first time. My problem might have to do with the variable I'm using? – MonkeyOnARock Oct 31 '16 at 09:19
  • "Okay, I've added the server side code that runs in the app.post request" — Isn't that the code you said *worked*? You should show us the `app.get` code which doesn't work. – Quentin Oct 31 '16 at 09:22
  • It's the same, except instead of `app.post` I change it to `app.get`. When I change it to `app.get`, it stops working. – MonkeyOnARock Oct 31 '16 at 09:23

2 Answers2

1

When you make a GET request, the data appears in the query string (of the URL in the request headers). It doesn't appear in the request body. There is no request body.

When you try to read from the request body, you are trying to access a property of an undefined object, which triggers an exception and cause an internal server error.

This answer explains how to read a query string:

var id = req.query.id; // $_GET["id"]

So

var userInput = req.query.userInput;
Community
  • 1
  • 1
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

I think var userInputForm = $('#userInputForm.val()') will get error or get wrong data..This may be the reason for the error. Due to userInputForm may not be a string and concatenate with userInput= Actually it is bad data. And for the data in ajax, you should modify data from data: "userInput=" + userInputForm, to:

data: {
  userInput: userInputForm
},
dataType: "json"

And var userInputForm = $('#userInputForm.val()')

to var userInputForm = $('#userInputForm').val();

At last, you could modify as bellow, I believe it works:

var userInputForm = $('#userInputForm').val();
$.ajax({
    url: "/createNewThing?userInput=" + userInputForm,
    type: "GET",
    success: function(response, status, http) {
        if (response) {
                console.log('AJAX worked!);
            }
        }
    });
Hieu Tran
  • 355
  • 4
  • 8
  • I made the `data` changes. Works for a POST request, but I still get a `500` error if I try changing it to a GET request. – MonkeyOnARock Oct 31 '16 at 09:03
  • The only difference this would make would be to properly escape `userInputForm` — I can't think of any circumstance where it would fix anything in a GET request that wouldn't also break in a POST request. – Quentin Oct 31 '16 at 09:06
  • hmmm, okay thanks for that! I will keep examining my code then to see if I'm missing something. – MonkeyOnARock Oct 31 '16 at 09:07
  • Could you change `dataType: "text"` to `dataType: "json"`. At last, you might modify the `url: "/createNewThing",` to `url: "/createNewThing?userInput=" + userInputForm` – Hieu Tran Oct 31 '16 at 09:10
  • *Could you change dataType: "text" to dataType: "json"* — What makes you think the server is responding with JSON? What makes you think that sending an Accept header indicating a preference for JSON would prevent the server from throwing a 500 error? – Quentin Oct 31 '16 at 09:14
  • *At last, you might modify the url: "/createNewThing", to url: "/createNewThing?userInput=" + userInputForm* — That's just different, more clunky, syntax for the original code without the escaping fix you implemented. It's a step backwards. – Quentin Oct 31 '16 at 09:14
  • Hmm. Because I write the answer with the data of Javascript object: `data: { userInput: userInputForm },`. So I suggest to modify dataType to make sure. – Hieu Tran Oct 31 '16 at 09:16
  • 1
    @HieuTran — You are confusing "Using a JavaScript object to describe the data to send to the server" with "Expecting to get a JSON text as the **response**" – Quentin Oct 31 '16 at 09:23