用ajax和javascript覆盖HTML对象

overwrite HTML object with ajax and javascript

本文关键字:HTML 对象 覆盖 javascript ajax      更新时间:2023-09-26

我正在金字塔中使用MySQL数据,我需要根据JS ajax调用的结果更改HTML if语句。

我的主页接收来自views.py的数据并将其传递给.mak脚本。这里重要的视图是主视图(它有基本的身份验证)和接收ajax POST的视图。
目前,主视图返回数据对象(oData)和datetime对象(history_week),指向一个星期前。

views.py:

#This view queries for data that I will use in the mak file
@view_config(route_name='monitor', 
        renderer='monitor:templates/monitor.mak', 
        permission='edit'
        )
def monitor(self):
    import datetime
    request = self.request
    oData = DBSession.query(Alert).order_by(Alert.time)
    history_week = datetime.datetime.now() - datetime.timedelta(days=7)
    return {
        'oData' : oData,
        'logged_in' : request.authenticated_userid,
        'history_week' : history_week,
        }
...
...
#this is the view for my js ajax call
@view_config(route_name="history_ajax",renderer="json")
def history_ajax(self):
    import datetime, json
    iDays = self.request.POST.get('days')
    history_days_ajax = datetime.datetime.now() - datetime.timedelta(days=iDays)
    #because datetime.datetime is not serializable
    from json import JSONEncoder
    class DateEncoder(JSONEncoder):
        def default(self, obj):
            if isinstance(obj, datetime.date):
                return obj.isoformat()
            return JSONEncoder.default(self, obj)

    return {
        'history_days_ajax' : json.dumps(history_days_ajax, cls=DateEncoder),
        }

我使用这些数据来绘制数据表,但我只想在特定的时间范围内绘制它们。目前,所有不到一周的数据都会被绘制出来。

HTML:

% for oAlert in oData[::-1]:
    % if oAlert.time >= history_week:
        <table id="Alerts">
        ...

我想做的是一个ajax调用在javascript中改变datetime对象,使它指向无论多少天前我想要的。换句话说,% if oAlert.time >= history_week应该读作% if oAlert.time >= history_days_ajax
在ajax中发布的数据('days')会根据用户的不同而变化。

JavaScript:

$(document).ready(function(){
    $('#day').click(function(event){
        $.ajax({
            type: "POST",
            url: "history",
            dataType: "json",
            data: {
                'days': 1,
            },
            async: false,
            success: function(data) {
                history = data.history;
            }, 
        });

我的问题如下:

1)我如何改变我的if语句根据我的ajax调用javascript?或者有没有更好的方法来做到这一点,而不会使事情变得非常复杂?
2)我需要在我的if语句中替换一个日期时间对象,因为首先页面需要加载一些东西,其次我想要1天的默认值。理想情况下,这应该是解决方案的一部分。

我希望我把每件事都说清楚了。这是一个相当长的问题。

我最终做到了没有ajax和一些重组:

不再定义静态路由,而是:

config.add_route(dRoute['monitor'], dRoute['/monitor/{duration}'])

,而不是在HTML中进行过滤,我通过DBSession在我的views.py中进行过滤。在这里,我检查url并相应地用python进行计算,这使得一切都变得容易多了:

@view_config(route_name='monitor', 
        renderer='monitor:templates/monitor.mak', 
        permission='edit'
        )
def monitor(self):
    import datetime
    request = self.request
    sDuration = request.matchdict['duration']
    if sDuration == 'Day':
        oDateThreshold = datetime.datetime.now() - datetime.timedelta(days=1)
    elif sDuration == 'Week':
        oDateThreshold = datetime.datetime.now() - datetime.timedelta(days=7)
    etc...

    oData = DBSession.query(Alert).order_by(Alert.time).filter(Alert.time>=oDateThreshold)

    return {
        'oData' : oData,
        'logged_in' : request.authenticated_userid,
        'history_week' : history_week,
        'sDuration' : sDuration,
        }

最后,当按下按钮时,我像这样更改HTML中的路径:

<a id="week" href="${request.route_url('monitor',duration='Week')}">
    1 Week
</a>

这让我摆脱了ajax。

简言之,就是这样:
当我点击按钮时,href将当前页面(monitor)的路径更改为monitor/'duration'。然后,我的视图读取新的url并根据它进行计算。返回的数据然后在我的.mak文件中使用,而不会使那里的事情复杂化。