使用jquery实现markdown预览

Posted in 2016-2-2 19:32 | Category: Web前端 | Tags: jquery markdown

虽然算不上是实时预览
实时预览功能等有时间在把它加上

还是把实时预览加上,不过实时预览可能会对网站有所影响,读者看着加上

前端

<script type="text/javascript">
function previewTopicContent(){
    $.getJSON("{{ url_for('blog.preview') }}", {
        content: $("#content").val(),
    }, function(data) {
        $("#showPreview").html(data.result);
    });
   /*setTimeout('previewTopicContent()',300);*/
};
</script>

或者

function previewTopicContent(){
    $.get("{{ url_for('blog.preview') }}", {
        content: $("#content").val(),
    }, function(data) {
        $("#showPreview").html(data);
    });
};

服务端

@site.route('/pages/preview')
def preview():
    from misaka import Markdown, HtmlRenderer
    from flask import jsonify
    content = request.args.get('content')
    html = HtmlRenderer()
    markdown = Markdown(html)
    return jsonify(result=Markup(markdown(content)))

或者

def preview():
    from misaka import Markdown, HtmlRenderer
    content = request.args.get('content')
    html = HtmlRenderer()
    markdown = Markdown(html)
    return Markup(markdown(content))

flask使用ajax

Posted in 2016-2-2 16:57 | Category: Python | Tags: ajax jquery flask

简单使用ajax

参考文档

<script type=text/javascript>
$(document).ready(function(){
    $('button#ajax').click(function() {
        $.ajax ({
            type : "POST",
            url : "{{ url_for('index.login') }}",
            data:JSON.stringify({
                name: $('input[name="name"]').val(),
                passwd: $('input[name="passwd"]').val()
            }),
            contentType: 'application/json;charset=UTF-8',
            success: function(result) {
                if (result.judge == true)
                {
                    window.location = '/';
                }
                else 
                {
                    $("#showerror").show();
                    $("#error").text(result.error);
                }
            }
        });
    });
});
</script>

ajax使用CSRF

参考文档

首先注册CSRF

from flask_wtf.csrf import CsrfProtect
csrf = CsrfProtect()
csrf.init_app(app)

在模板中使用

var csrftoken = "{{ csrf_token() }}"
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken)
            }
        }
    });