passing ajax data to backend javascript

Question

I'm trying to log my users location using some Ajax code I was able to gather from online. I am trying to pass it to the backend code where I can store the data in my db for analytics. I have never used Ajax before and am not familiar with the syntax for passing through to backend.

Here's my code.

<div>Country: <span id="country"></span> 
<div>State: <span id="state"></span>
<div>City: <span id="city"></span>

$.ajax({
  url: "https://geoip-db.com/jsonp",
  jsonpCallback: "callback",
  dataType: "jsonp",
  success: function (location) {
    $("#country").html(location.country_name);
    $("#state").html(location.state);
    $("#city").html(location.city);
  }
});

I basically need to pass $('#country').html(location.country_name); $('#state').html(location.state); $('#city').html(location.city); to my nodejs code. I've used fetch before in js but not sure if thats the syntax to include the Ajax code in it. Appreciate the help.

Can you show your front end HTML Code and how the backend wants to process the code, this will really help. Also, jQuery has $.getJSON(), which is a better alternative to your above approach. Happy to help you if you provide the missing details. 😁 — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Dec 8, 2020 at 12:37
awesome! <div>Country: <span id="country"></span> <div>State: <span id="state"></span> <div>City: <span id="city"></span> is my front end code. nothing special, just want to end up hiding this and not showing on screen so I can just grab this data. — Gianluca
– Gianluca, Commented Dec 8, 2020 at 12:41
why not simply do $('#country').text() same for all to get data from span tag ? — Swati
– Swati, Commented Dec 8, 2020 at 12:45
@Gianluca Yea, Swati's suggestion will work. Can you add your HTML and Backend on the question by editing it please? — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Dec 8, 2020 at 12:45
I don't really follow, sorry. I just updated the html back into the question... What would $('#country').text() do? — Gianluca
– Gianluca, Commented Dec 8, 2020 at 12:49

Praveen Kumar Purushothaman · Accepted Answer · 2020-12-08 12:53:24Z

2

If you have some data to be sent to the server using AJAX and if you have something like the HTML that you have got, you can very well use the textContent or .text() (using jQuery) of the element. Here's how you do it.

// Sending data to the server...
var data = {
  country: $("#country").text(),
  state: $("#state").text(),
  city: $("#city").text()
};
console.log("Data to be sent!");
console.log(data);
console.log("Serialised data!");
console.log($.param(data));

// Send data to end point and get JSON value.
$.getJSON("/endpoint?" + $.param(data), function (res) {
  console.log(res);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Country: <span id="country">India</span> 
<div>State: <span id="state">Tamil Nadu</span>
<div>City: <span id="city">Chennai</span>

In the above example, the contents of the HTML will be sent to the server. Check out the console and network for what is been sent.

Here's from the Network tab of Google Chrome:

answered Dec 8, 2020 at 12:53

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Praveen Kumar Purushothaman Over a year ago

@Gianluca Glad I was able to help. Hope my explanation was clear. Feel free to ask more questions. Thanks for motivating me and asking this question! 😁 Have a nice day.

Gianluca · Accepted Answer · 2020-12-08 13:38:30Z

To anyone who else who is looking at this question, you may also use javascript within the Ajax function. It may not be the proper way, but it does work.

<script>
    $.ajax({
    url: "https://geoip-db.com/jsonp",
    jsonpCallback: "callback",
    dataType: "jsonp",
    success: function( location ) {
    $('#country').html(location.country_name);
    $('#state').html(location.state);
    $('#city').html(location.city);
    
    console.log(location)
    var locaionValues = location;
    var countryNameLocation = location.country_name;
    var stateNameLocation = location.state;
    var cityNameLocation = location.city;


    fetch('/locationTracker', {
      method: 'POST', 
      headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
    locaionValues,
    countryNameLocation,
    stateNameLocation,
    cityNameLocation,
    })
  })
}
});

this works great, and in my nodejs code, I am logging the code like so:

app.post('/locationTracker', (req, res) => {

var country = req.body.countryNameLocation
var state = req.body.stateNameLocation
var city = req.body.cityNameLocation
console.log("country is " + country)
console.log("state is " + state)
console.log("city is " + city)

Collectives™ on Stack Overflow

passing ajax data to backend javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related