Try Django with Jquery [Week 1]

$Preface

---

第一次尝试在Django框架下做tools development，源于一次机缘巧合的intern。

对于intern，我想以后一定会发一篇博文，好好讲讲这个故事。

没有这次intern的经历，可能对于这样的一个优秀的web framework还仅仅是处于有所耳闻的阶段。

回想刚刚接触编程，还是在大学一年级入学前的那个暑假。

买了一本《21天学通C++》，于是开始闷头苦干。刚开始的时候，都不知道用什么编译器，满心欢喜安装了VS之后，发现不会新建工程，这个问题直到大二那时学C++伊始都没有解决，真是人生一大败笔。遂放弃VS，上网好不容易找到了一个十分奇怪的编译器，有点像Python IDE的感觉。

大学一年级第一学期学了python，自认为学得好不错，至少能写点简单的程序了。

大学二年级第二学期电类工程导论C课上，重新捡起python，迷迷糊糊地用了web.py，只是照着模板死板的该代码，都不知道原理。实现了一个searching engine。

大学三年级第一学期和其他两个小伙伴准备为交大吃吃写点什么。当初已经决定用Django+nodejs，不过借我们服务器的老大不允许，结果只好作罢，老老实实写PHP，不过第一次体验MVC的开发过程，学习了CodeIgniter框架。

故事说到这里终于讲到重点了。千里寻他千百度，{"那人": "Django"}却在灯火灯火阑珊处。

想想过去的一周，debug的时间都比coding的时间要多的多。

归结到底，还是对于Django开发和Jquery使用的不了解。

犯错并不可怕，而怕的是一错再错。犯过的错误记录下来，不犯第二次，也算是一种进步。

这也是我想写这篇文的一个原因。

{Problems set}

---

好了，说正题。一周的开发过程中，主要遇到了2个问题。

1. Html/JavaScript前台调用Django后台变量

2. JavaScript代码执行的顺序

3. Ajax使用规范

Sols & Feelings 

---

Django给我非常好的印象在于有Block这样一个东西，算是一个特点吧。与includes操作不同，block操作恰好是其逆操作。这给整个开发过程带来了极大的便利，不仅结构清晰而且大大减少了代码冗余。

前台可以通过调用views.py中的function返回得到{{ VARIABLES }}，这是前后台数据交互的一种手段。稍不注意，就悲剧了，直接上代码。

# WRONG CODE    
<script>
    $(document).ready(function(){
        if (!$("input[name='alert_switch']").prop("checked")) {
        $("#message").html("<font color=red><h3>You have not enabled Alert yet.</h3></font>");
            $("input[name='alert_switch']").prop("checked", "false");
            $("input[name='trigger_times']").prop("disabled", true);
            $("input[name='alert_interval']").prop("disabled", true);
            $("#alert_settings").hide();
        }
        else {
            $("#message").html("<font color=green><h3>You have enabled Alert.</h3></font>");
            $("input[name='trigger_times']").val({{ trigger_times }});
            $("input[name='alert_interval']").val({{ alert_interval }}/60.0);
            $("#trigger_times_menu li a").click(function(){
                trigger_times = $(this).text();
                $("input[name='trigger_times']").val(trigger_times);
            });
             $("#alert_interval_menu li a").click(function(){
                alert_interval = $(this).text();
                $("input[name='alert_interval']").val(alert_interval);
            });
        }
    });
</script>

起初，不理解javascript的执行机制，以为js是按照逻辑，顺序执行的。出现了not checked的情况下，进入了else语句，显示{{ trigger_times }}和{{ alert_interval }}不存在，连undefined都不是。原来{{ VARIABLES }}在加载HTML的同时，就已经语义化了，而报错不是因为进入了else语句，是因为js编译错误。

解决方法很简单，加上''，即可。

$("input[name='trigger_times']").val('{{ trigger_times }}');
$("input[name='alert_interval']").val('{{ alert_interval }}'/60.0);

---

上面出现的问题，debug了很久，也没想通问题在哪儿，主要原因就是对于js代码的执行顺序不清楚。

看了别人的blog，才有多了解。用几句话，概括一下。

1. 代码段之间是独立的，全局变量可以共享。

2. 编译只负责提取声明的变量和函数，不负责初始化工作。

详细的教程和demo可以看这里，这篇博客讲的非常的清楚。

---

使用Ajax无非是为了减轻server的压力，减少页面loading的等待。

结果裸写了一个Ajax，return 200，竟然还毫无作用，success function屁都没执行。

#WRONG CODE
<script>
    $(document).ready(function(){
        $("#alert_settings").click(function(){
            $.ajax({
                type: "get",
                url: "{% url "alert_settings" %}",
                data: "trigger_times="+$("input[name='trigger_times']").val()+"&alert_interval="+$("input[name='alert_interval']").val(),
                success: function(ret){
                    $("input[name='trigger_times']").val(ret.trigger_times);
                    $("input[name='alert_interval']").val(ret.alert_interval);
                }
            });
            return false;
	    });
    });
</script>

仔细一想，$.ajax与$.get和$.post不同在于它支持error信息的返回。于是加上了error function，TMD，return 200,竟然真的进入error了，当时就吓傻了。

Google一发，和我一样无知的少年果然一大把，是dataType的问题，于是重写，并加入error function方便debug。

<script>
    $(document).ready(function(){
        $("#alert_settings").click(function(){
            $.ajax({
                type: "get",
                url: "{% url "alert_settings" %}",
                data: {"trigger_times": $("input[name='trigger_times']").val(),
                    "alert_interval": $("input[name='alert_interval']").val()},
                dataType: 'text json',
                success: function(ret){
                    $("input[name='trigger_times']").val(ret.trigger_times);
                    $("input[name='alert_interval']").val(ret.alert_interval);
                },
                error: function(ret){
                    alert("error");
                }
            });
            return false;
	    });
    });
</script>

转载于:https://my.oschina.net/yamamaki/blog/264145