草庐IT

javascript - 在 Node js 的 .ajax jquery 包装器中呈现 POST 请求的 mongodb 数据库结果

coder 2023-11-02 原文

我正在创建一个基本功能,允许用户将他们的位置发送到服务器,然后服务器查询数据库并返回他们附近的位置。我正在使用下面的 jQuery .ajax 包装器将数据发布到服务器。这采用 latlon 点的形式,然后将其用作在后端使用 nodejs 和 express 在 MongoDB 中进行地理搜索的基础。然后,搜索结果将返回给客户端并由 createMapListings 函数呈现。

/find 页面最初是通过 mongodb 对数据库的 GET 请求呈现的,与下面的代码不同。然而,在初始渲染之后,我想根据提供的位置返回结果。

POST 方法工作正常,位置被发布到服务器,搜索结果被返回,因为我可以通过控制台日志打印出内容。

但是,我想在客户端呈现结果。如前所述,搜索结果呈现在控制台中,但是当我尝试传递给客户端时,我可以在#output div 中呈现数据本身(以对象数组的形式),但是 createMapListings 函数似乎没有捕捉到数据。

事实上,下面的函数似乎被调用但打印出超过一千行,其中应捕获的数据被描述为“未定义”。我曾尝试使用 res.render 和 res.redirect,但在第一种情况下, View 在 div 中呈现(我认为这是预期的)并且重定向失败。

当向服务器发出简单的 GET 请求时,createMapListings 函数可以正常工作,例如,使用 ejs 模板获取集合中的所有对象。但是,我认为这里的问题可能是 POST 请求的组合,然后想使用完整的回调将结果传回 AJAX 请求。

如果下面的代码有些晦涩,我深表歉意。我绝对是你所说的初学者。我明白上述功能可能无法实现,所以如果有更好的方法,我当然会接受它(也许是 res.direct)。

这是相关的客户端脚本:

$(document).ready(function(){

$("#geolocate").click(function(){ 
navigator.geolocation.getCurrentPosition(geolocate, function(){

        });
     });
 });

function geolocate(pos){
     var latlonpt = [];
     var x = pos.coords.latitude;
     var y = pos.coords.longitude;
     latlonpt.push(x);
     latlonpt.push(y); 

    var obj = {
    userlocation: latitudelongitudept
    };

   $.ajax({
    url: "/find",
    type: "POST",
    contentType: "application/json",
    processData: false,
    data: JSON.stringify(obj),
    complete: function (data) {
        $('#output').html(data.responseText);
        $('#infooutput').children().remove();
        createMapListings(data.responseText); 
        }
     });
 };


 function createMapListings(maps) {
 for (var i = 0; i < maps.length; i++) {
 var url = maps[i]._id;
 var fullurl = "<a href='/show?id=" + url + "'>Route</a></div>";
 var title = "<div>" + maps[i].title + " - " + fullurl +"";
 $('#infooutput').append(title);

     };
  };

 </script>

这是在基本的 express 应用程序中使用的相关路由,用于处理上述 .ajax 包装器发出的发布请求。

 exports.findbylocation = function(req, res) {
 console.log(req.body.userlocation);
 var userlocation = req.body.userlocation;
 Map.ensureIndexes;
 Map.find({loc :{ $near : userlocation }}, function(err, maps) {

 if (err) { 
          console.log(err)
          }
 else {    
       var jmaps = JSON.stringify(maps);
       console.log(jmaps);
       res.send(jmaps);
      }      
   });
};

最佳答案

按照惯例,$.ajax 回调签名中的data 变量名称指的是已解析的 HTTP 响应主体。由于您的回调是在 complete 上进行的,因此我们实际上传递了使用的 XMLHttpRequest,按照约定称为 xhr。您正确地获取了 responseText 属性,但这需要解析才能发挥作用。只要我们注意我们的 Content-Type 并且不显式禁用 processData,jQuery 就会为我们进行编码/取消编码 - 我们只处理对象.这是一件好事,因为传输格式通常对应用程序逻辑并不特别重要。如果我们使用 res.json(maps) 代替 res.send(jmaps),我们可以更简单地编写调用:

$.ajax({
    url:  '/find',
    type: 'POST',
    data: obj,

    success: function(data) {},
    error:   function(xhr, text, err) {}
});

这里的 data 是一个已经解析并可以使用的 Javascript 对象。我们还使用默认的 application/x-www-form-urlencoded 请求,而不是显式设置 contentType。就 express 而言,这是相同的:它只会被 urlencoded 解析。而不是 json .

关于javascript - 在 Node js 的 .ajax jquery 包装器中呈现 POST 请求的 mongodb 数据库结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12637592/

有关javascript - 在 Node js 的 .ajax jquery 包装器中呈现 POST 请求的 mongodb 数据库结果的更多相关文章

  1. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  2. ruby - 如何模拟 Net::HTTP::Post? - 2

    是的,我知道最好使用webmock,但我想知道如何在RSpec中模拟此方法:defmethod_to_testurl=URI.parseurireq=Net::HTTP::Post.newurl.pathres=Net::HTTP.start(url.host,url.port)do|http|http.requestreq,foo:1endresend这是RSpec:let(:uri){'http://example.com'}specify'HTTPcall'dohttp=mock:httpNet::HTTP.stub!(:start).and_yieldhttphttp.shou

  3. ruby-on-rails - rails : How to make a form post to another controller action - 2

    我知道您通常应该在Rails中使用新建/创建和编辑/更新之间的链接,但我有一个情况需要其他东西。无论如何我可以实现同样的连接吗?我有一个模型表单,我希望它发布数据(类似于新View如何发布到创建操作)。这是我的表格prohibitedthisjobfrombeingsaved: 最佳答案 使用:url选项。=form_for@job,:url=>company_path,:html=>{:method=>:post/:put} 关于ruby-on-rails-rails:Howtomak

  4. ruby - 有人可以帮助解释类创建的 post_initialize 回调吗 (Sandi Metz) - 2

    我正在阅读SandiMetz的POODR,并且遇到了一个我不太了解的编码原则。这是代码:classBicycleattr_reader:size,:chain,:tire_sizedefinitialize(args={})@size=args[:size]||1@chain=args[:chain]||2@tire_size=args[:tire_size]||3post_initialize(args)endendclassMountainBike此代码将为其各自的属性输出1,2,3,4,5。我不明白的是查找方法。当一辆山地自行车被实例化时,因为它没有自己的initialize方法

  5. ruby - Ruby 有 `Pair` 数据类型吗? - 2

    有时我需要处理键/值数据。我不喜欢使用数组,因为它们在大小上没有限制(很容易不小心添加超过2个项目,而且您最终需要稍后验证大小)。此外,0和1的索引变成了魔数(MagicNumber),并且在传达含义方面做得很差(“当我说0时,我的意思是head...”)。散列也不合适,因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题,但我很想知道:Ruby标准库是否已经带有这样一个类? 最佳

  6. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过?我有一个调用Controller方法的JqueryPOSTajax调用,但我没有在其中放置任何真实性代码,但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  7. ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能? - 2

    只是想确保我理解了事情。据我目前收集到的信息,Cucumber只是一个“包装器”,或者是一种通过将事物分类为功能和步骤来组织测试的好方法,其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗? 最佳答案 有点。它是一种组织测试的方式,但不仅如此。它的行为就像最初的Rails集成测试一样,但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意,您可以使用步骤来构建对象和设置状态,但通常您

  8. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  9. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  10. FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2

    本教程将在Unity3D中混合Optitrack与数据手套的数据流,在人体运动的基础上,添加双手手指部分的运动。双手手背的角度仍由Optitrack提供,数据手套提供双手手指的角度。 01  客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照:https://gitee.com/foheart_1/foheart-h1-data-summary.git02  数据转发打开MotiveBody软件的Streaming,开始向Unity3D广播数据;MotionVenus中设置->选项选择Unit

随机推荐