Ajax
Posted 张瑞东
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
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\')
基于jQuery实现的ajax可以说是最为方便好用的，实际上jQuery无法直接响应ajax，而是通过XMLHttpResponse来相应，XMLHttpResponse又叫原生ajax。详见
武sir的 《AJAX全套》
以上是关于Ajax的主要内容，如果未能解决你的问题，请参考以下文章