Используя 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, и я не знаю, почему нет.

766   2  

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

    Ничего не найдено.