首页 > 代码库 > Ajax

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 = http://www.mamicode.com/字符串 {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 jsondef 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全套》

Ajax