使用 Flask，尝试在更新 mongo 记录后让 AJAX 更新跨度，但它正在打开一个新页面答案

【问题标题】：Using Flask, trying to get AJAX to update a span after updating mongo record, but it's opening a new page使用 Flask，尝试在更新 mongo 记录后让 AJAX 更新跨度，但它正在打开一个新页面
【发布时间】：2012-07-22 08:51:03
【问题描述】：

感觉好像我在这里遇到了一些相当简单的事情。

我不太了解 AJAX 和 Flask。

我有一个项目，我在浏览器中显示 mongodb 记录，它一直运行良好。

我为用户添加了增加记录投票的功能；如果他们喜欢，请投票。但最初我用新的投票刷新了整个页面，使用重定向，这是笨拙的。所以我试图让 AJAX 将数据发送到 mongodb 记录，然后更新我希望投票出现的范围，而无需重新加载整个页面。

问题是，我正在进行的设置，虽然仍在更新记录，但现在正在加载一个新页面，其中的 HTML 我只想返回到投票记录应该是的跨度（也就是说，它正在加载一个新页面里面只有“test”这个词（我当前返回的测试值））。

jQuery（我正在使用的库）加载正常，没有其他问题（据我所知）。

我这里有相关的 HTML 和 JS：

<!-- All Standard HTML up here, removed for simplicity -->


<script>


  $('#vote_link').bind('click', function(e){
     e.preventDefault();
     var url = $(this).attr('href');
     $('#vote_tally').load(url);

  });


</script>



<a href='/vote_up/{{ item._id }}' id='vote_link'>Vote for Me!</a><br>
Likes: <span id='vote_tally'>{{ item.votes }}</span>


<!-- All Standard HTML down here, removed for simplicity -->

蟒蛇就在这里：

from flask import Flask, render_template, request, redirect, flash, jsonify
#from mongokit import Connection, Document
#from flask.ext.pymongo import PyMongo
from pymongo import Connection#, json_util
#from pymongo.objectid import ObjectId #this is deprecated
import bson.objectid

'''my pymongo connection - removed for simplicity'''

'''bunch of other routes - also removed for same reason'''


#increment a vote
@app.route('/vote_up/<this_record>')
def vote_up(this_record):

  vandalisms.update({'_id':bson.objectid.ObjectId(this_record)}, 
            {"$inc" : { "votes": 1 }}, upsert=True)

  '''
  also trying to return value for votes field from mongo record, but one step at a 
  time here
  '''
  #result = vandalisms.find({'_id':bson.objectid.ObjectId(this_record)}, {'votes':1})

  result = 'test'

  return result

我也无法弄清楚如何将指定 mongodb 记录的个人投票值返回给浏览器，即使使用 jsonify（返回 {"votes":'_id'}，但这是另一个问题。希望有人可以帮助我了解如何在这方面使用 Flask 使 AJAX 为我工作。

提前致谢，

Edit-24Jul2012-2:27PM CST：

我怀疑 jQuery 甚至没有激活。它似乎正在根据链接的 href 属性加载新页面，因此在未运行时使用 e.prevenDefault(); 是没有用的。此外，当点击事件发生时，alert('I have been clicked'); 永远不会运行。再次，jQuery被加载了，但是点击事件没有激活jQuery，我不知道为什么没有。

【问题讨论】：

标签： python mongodb jquery flask

【解决方案1】：

我的猜测（根据您的编辑）是您的页面上有多个 ID 为 vote_link 的元素 - 这在 HTML 中是不允许的（ID 属性在整个文档中必须是唯一的）。如果您想让多个链接共享相同的行为，请改用一个类（例如$(".vote_link")）。

【讨论】：

是的。菜鸟的错误。当当。

【解决方案2】：

AJAX 的工作方式基本上是服务器使用 XML 或 JSON 进行回复。

在这种情况下，来自 flask 的 jsonify 函数将使用带有以下 HTTP 标头字段的消息进行响应：

Content-type: application/json

这是为了让浏览器和 JavaScript 理解语法，如果您需要接收的不仅仅是数字或一些文本。

因此，在 Flask 上使用 jsonify 作为文档示例，然后在 JavaScript 端使用 $.getJSON() 或 $.ajax()。

http://flask.pocoo.org/docs/patterns/jquery/#json-view-functions

https://github.com/mitsuhiko/flask/tree/master/examples/jqueryexample

【讨论】：

谢谢，我很欣赏你的解释，但这些变化仍然没有改善这种情况。我必须更新原帖。