web框架-（五）Ajax

Ajax即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）,AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

-----传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面；

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

Ajax工作原理：

web框架-（五）Ajax

1. 基本参数

$.ajax，这个是JQuery对ajax封装的最基础步骤，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。看一下常用的参数：

  var configObj = {
       method   //数据的提交方式：get和post
       url   //数据的提交路径
       async   //是否支持异步刷新，默认是true
       data    //需要提交的数据
       dataType   //服务器返回数据的类型，例如xml,String,Json等
       success    //请求成功后的回调函数
       error   //请求失败后的回调函数
    }
 
$.ajax(configObj);//通过$.ajax函数进行调用。

2. 实例分析

$.ajax({
    url: '/host',               // 数据提交地址
    type: "POST",               // 提交类型
    data: {'k1': 123, 'k2': "root"},        // 提交的内容 字典格式
    success: function(data){　　　　// 客户端会一直等待服务端返回的数值
            // data是服务器端返回的字符串
        var obj = JSON.parse(data);
    }
})
 
建议：永远让服务器端返回一个字典
return HttpResponse(json.dumps(字典))

3. 简单的前后端交互

<div class="shade hide"></div>
        <div class="add-modal hide">
            <form method="POST" action="/home/">
            <div class="group">
                <input id='host' type="text" placeholder="主机名" name="hostname" />
            </div>

            <div class="group">
                <input id='ip' type="text" placeholder="IP" name="ip" />
            </div>

            <div class="group">
                <input id='port' type="text" placeholder="端口" name="port" />
            </div>

            <div class="group">
                <select id='sel' name="b_id">
                    {% for op in b_list %}
                    <option value="{{ op.id }}">{{ op.caption }}</option>
                    {% endfor %}
                </select>
            </div>
            <input type="submit" value="提交" />
            <a id="ajax_submit">要上天提交</a>
            <input id="cancel" type="button" value="取消" />

        </form>

    </div>

index.html