Используя Flask, пытаюсь заставить AJAX обновить span после обновления записи mongo, но он открывает новую страницу
Чувствую, что я спотыкаюсь о что-то довольно простое.
Я ничего не понимаю в Аяксе и Фласке.
У меня есть проект, в котором я отображаю записи mongodb в браузере, который работает нормально.
Я добавил функциональность для пользователей, чтобы увеличить голоса на записи; голосовать, если им это нравится. Но первоначально я обновлял всю страницу с новым голосованием, используя редирект, который является неуклюжим. Поэтому я пытаюсь заставить AJAX отправлять данные перейдите к записи mongodb, а затем обновите интервал, в котором я хочу, чтобы голоса появились без необходимости перезагрузки всей страницы.
Проблема в том, что настройка, которую я собираюсь выполнить, все еще обновляя запись, теперь загружает новую страницу с HTML, который я хочу вернуть только в тот промежуток, где должен быть подсчет голосов (то есть он загружает новую страницу только со словом "тест" (тестовое значение, которое я в данный момент возвращаю)).
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'}, но это другая проблема. Надеюсь, кто-нибудь поможет мне понять, как заставить AJAX работать на меня с Flask в этом отношении.
Спасибо. продвижение,
Edit-24Jul2012-2: 27PM CST:
Я подозреваю, что jQuery даже не активируется. Похоже, что он загружает новую страницу на основе атрибута href ссылки, поэтому нет смысла иметь e.prevenDefault();, когда это не выполняется. Кроме того, alert('I have been clicked'); никогда не запускается, когда происходит событие click. Опять же, jQuery загружен, но событие click не активирует jQuery, и я не знаю, почему нет.
2 ответов:
Мое предположение (основанное на вашем редактировании) состоит в том, что у вас есть более одного элемента на странице с идентификатором
vote_link- это не разрешено в HTML (свойство ID должно быть уникальным во всем документе). Если вы хотите иметь несколько ссылок с одинаковым поведением, используйте вместо них класс ($(".vote_link"), например).
В основном способ работыAJAX заключается в том, что сервер отвечает XML или JSON.
В этом случае Функция jsonify из flask ответит сообщением с этим полем заголовка HTTP:
Content-type: application/jsonЭто необходимо для браузера и JavaScript, чтобы понять синтаксис, если вам нужно получить больше, чем просто число или некоторый текст.
Итак, используйте jsonify on Flask в качестве примера docs, а затем используйте $.getJSON () или $.ajax () на JavaScript сторона.
Http://flask.pocoo.org/docs/patterns/jquery/#json-view-functions
Https://github.com/mitsuhiko/flask/tree/master/examples/jqueryexample
Comments