将ajax数据传递给后端javascript

Posted 2023-03-07

【中文标题】将ajax数据传递给后端javascript

【英文标题】：passing ajax data to backend javascript

【发布时间】：2021-03-19 18:44:21

【问题描述】：

我正在尝试使用从网上收集到的一些 Ajax 代码记录我的用户位置。我试图将它传递给后端代码，在那里我可以将数据存储在我的数据库中以进行分析。我以前从未使用过 Ajax，也不熟悉传递到后端的语法。

这是我的代码。

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

我基本上需要将$('#country').html(location.country_name); $('#state').html(location.state); $('#city').html(location.city); 传递给我的nodejs 代码。我以前在 js 中使用过 fetch，但不确定这是否是在其中包含 Ajax 代码的语法。感谢您的帮助。

【问题讨论】：

您能否展示您的前端 HTML 代码以及后端希望如何处理代码，这将非常有帮助。此外，jQuery 有$.getJSON()，这是您上述方法的更好替代方案。如果您提供缺少的详细信息，我们很乐意为您提供帮助。 ????

太棒了！ 国家： 州： 城市： 是我的前端代码。没什么特别的，只是想最终隐藏它而不显示在屏幕上，这样我就可以抓取这些数据。 为什么不简单地为所有$('#country').text() 做同样的事情来从span 标签中获取数据？ @Gianluca 是的，斯瓦蒂的建议会奏效。您能否通过editing 在问题上添加您的 HTML 和后端？ 我没有真正关注，对不起。我刚刚将 html 更新回问题中...$('#country').text() 会做什么？

【参考方案1】：

如果你有一些数据要使用 AJAX 发送到服务器，并且如果你有类似 HTML 的东西，你可以很好地使用元素的 textContent 或 .text()（使用 jQuery）。以下是你的做法。

// 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>

在上面的例子中，HTML 的内容将被发送到服务器。检查控制台和网络发送的内容。

这是来自 Google Chrome 的“网络”标签：

【讨论】：

@Gianluca 很高兴我能提供帮助。希望我的解释很清楚。随时提出更多问题。感谢您激励我并提出这个问题！ ? 祝你有美好的一天。

【参考方案2】：

对于正在查看此问题的其他人，您也可以在 Ajax 函数中使用 javascript。这可能不是正确的方法，但确实有效。

<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,
    )
  )

);

这很好用，在我的 nodejs 代码中，我正在记录代码，如下所示：

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)

【讨论】：

也感谢您添加此内容。不错。