AJAX,Asynchronous JavaScript and XML
(异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案。

 

异步的JavaScript:

使用 【JavaScript语言】 以及 相关【浏览器提供类库】
的功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript的回调函数】。

永利开户送38元体验金,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就是后台返回的数据
  }
 })

看一个例子

前端页面:

永利开户送38元体验金 1永利开户送38元体验金 2

<!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

永利开户送38元体验金 3永利开户送38元体验金 4

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。详见

武sir的
《AJAX全套》

相关文章