How do i get result in box in current window through express node after click on submit button?

user_9476180 0
Viewed 84

I am unable to get a response with node and express when i click the submit button. I am fairly new to node and express. Here is what I have tried. Can you tell me what is wrong with my code? Please guide me on how to get instantaneous response in the box on current html or what is other way to get response instead of async function?

<p class="borderBox"></p>
express html javascript
1 Answers

It's hard to say without seeing all of your code. But I think the first issue is that you aren't checking your req.headers kvps defensively enough. Certain headers are not always present in a request, so you'll need to provide for the case where they don't arrive as expected

     if (req['x-forwarded-for']) {
         var ip = req['x-forwarded-for'].split(',')

or

     req['x-forwarded-for'] = req['x-forwarded-for'] || ''

UPDATE

Judging by what code you have provided, first make the following changes to your server.js code:

app.get('/headers', function(req, res) {
    if (req.headers['x-forwarded-for'])
        var ip = req.headers["x-forwarded-for"].split(',')[0];
    if (req.headers['accept-language'])
        var lang  = req.headers['accept-language'].split(',')
    if (req.headers['user-agent'])
        var sys = req.headers['user-agent'].match(/\((.+?)\)/)[1]


    var obj = {
        "IP Address": ip,
        "Language" : lang,
        "Operating System": sys
    }

    // res.json(obj);
    res.set('Content-Type', 'application/json');
    res.status(200).send(obj);
});

Then, you have to make a change to the URI you call with fetch() so it reaches the endpoint you've specified above in your app.get() (i.e. '/headers'). I'm using localhost on port 3000.

$("#submit").submit(async function(event) {
    event.preventDefault();
    // const response = await fetch(window.location.href);
    const response = await fetch('http://localhost:3000/headers');
    const data = await response.json();
    document.getElementsByClassName('borderBox')[0].innerText = JSON.stringify(data);
});

Finally, I don't know much about your project setup, but here's how I did it by serving an index.html file from express using

app.use(express.static(path.join(__dirname, 'public')));

and placing index.html in a directory named /public at the root directory of the express app. The file index.html is below:

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<p>
    Please click to get the IP address, language, and operating system for your 
device.
</p>

<form id="submit">
    <button type="submit">Submit</button>
</form>


<p class="borderBox">    </p>

<script>
    $("#submit").submit(async function(event) {
        event.preventDefault();
        // const response = await fetch(window.location.href);
        const response = await fetch('http://localhost:3000/headers');
        const data = await response.json();
        document.getElementsByClassName('borderBox')[0].innerText = JSON.stringify(data);
    });
</script>

I'm just including this last part because, again, I can't see how you've set up your project - but this worked for me.

user_42861640
Related