AJAX的应用实例

应用:
1. 使用AJAX,利用XMLHttpRequest对象可以在后台与服务器进行
单独交互,然后局部刷新网页内容。
2. 使用Ajax的步骤:
1. 创建XMLHttpRequest对象。
2. 利用第一步创建的对象发送请求。
3. 等待服务器的响应(可以异步等待,也可以同步等待)。

4. 利用服务器的响应内容局部刷新页面。

        3. 片段代码实例:

            {%block head%}
            <script type="text/javascript" src="{{ static_url('js/jquery-1.11.3.js')}}"></script>
            <script>
                $(function () {
                    var input_registname = $("#input_registname");
                    var span_result = $('#span_result');
                    input_registname.blur(function () {
                        var username = input_registname.val();
if(username == ""){
                            return;
                        }
                        $.ajax({
                            url: '/check',  # 请求的url接口
                            data: {'username':username},  # 发送请求的参数
                            type: 'post',   # 发送请求的方法
                            datatype: 'json',  #参数传递的格式
                            async: 'true',     # 是否为异步请求
                            success: function (data) {
                                console.log('success' + data)
var msg = data.msg;
                                if(msg == 'ok'){
                                    span_result.text('用户名可用');
                                    span_result.css('color', 'blue');
                                }else{
                                    span_result.text('该用户名已存在');
                                    span_result.css('color', 'red');
                                }
                            },
                            error: function (err) {
                                console.log('error' + err)
                            }
                        });
                    });
                });
            </script>
        {%end%}

展开阅读全文

没有更多推荐了,返回首页