Ajax

AJAX，Asynchronous JavaScript and XML (异步的JavaScript和XML)，一种创建交互式网页应用的网页开发技术方案。
 
异步的JavaScript：
使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求，当服务端处理完请求之后，【自动执行某个JavaScript的回调函数】。
PS：以上请求和响应的整个过程是【偷偷】进行的，页面上无任何感知。
XML
XML是一种标记语言，是Ajax在和后台交互时传输数据的格式之一
利用AJAX可以做：
1、注册时，输入用户名自动检测用户是否已经存在。
2、登陆时，提示用户名密码错误
3、删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
 
Jquery-Ajax    
　 1.下载导入jQuery，放在static目录下
    2.setting中导入配置
    3.在HTML中引用jQuery
$.ajax({
		url: '/index/',
		type: 'POST',
		data: {'username': 'alex','password': '123'},
		success: function(data){
			// 当后台return之后，该函数自动执行
			// data就是后台返回的数据
		}
	})

看一个例子
前端页面：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <p>用户名：<input type="text" id="username" /></p>
    </div>
    <div>
        <p>用户名：<input type="password" id="pwd" /></p>
    </div>
    <input type="button" value="提交" onclick="SubmitForm();" />
    <script src="/static/jquery-1.8.2.min.js"></script>
    <script>
        function SubmitForm(){
            $.ajax({
                url: '/web/ajax_demo/',
                type: 'POST',
                data: {'user': $('#username').val(), 'pwd': $('#pwd').val()},
                dataType: 'json',
                success: function (data) {
                    // data = 字符串 {status:xx,message:''}
                    // data对象
                    //var data_dict = JSON.parse(data);
                    if(data.status){
                        location.href = "http://www.baidu.com";
                    }else{
                        alert(data.message);
                    }
                }
            })
        }
    </script>
</body>
</html>
View Code

Django中view.py

import json
def ajax_demo(request):
    if request.method == 'POST':
        ret = {'status':False,'message':''}
        user = request.POST.get('user',None)
        pwd = request.POST.get('pwd',None)
        if user == '111' and pwd == '222':
            # return HttpResponse('1')
            ret['status'] = True
            return HttpResponse(json.dumps(ret))
        else:
            # return HttpResponse('2')
            ret['message']='用户名或者密码错误!'
            return HttpResponse(json.dumps(ret))
    return render(request,'ajax_demo.html')
View Code
基于jQuery实现的ajax可以说是最为方便好用的，实际上jQuery无法直接响应ajax，而是通过XMLHttpResponse来相应，XMLHttpResponse又叫原生ajax。详见
posted @ 2016-09-08 19:33  张瑞东  阅读(349)  评论(0)  编辑  收藏  举报