ajax
Posted 人生苦短,我用python
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax相关的知识,希望对你有一定的参考价值。
概述
对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(html),浏览器将字符串(HTML)渲染并显示浏览器上。
1、传统的Web应用
一个简单操作需要重新加载全局数据
2、AJAX
AJAX,Asynchronous javascript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案。
- 异步的JavaScript:
使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript的回调函数】。
PS:以上请求和响应的整个过程是【偷偷】进行的,页面上无任何感知。- XML
XML是一种标记语言,是Ajax在和后台交互时传输数据的格式之一利用AJAX可以做:
1、注册时,输入用户名自动检测用户是否已经存在。
2、登陆时,提示用户名密码错误
3、删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。
原生ajax上传数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"/> <input type="button" value="ajax1" onclick="ajax1()"/> <script> function getXHR(){ var xhr = null; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } return xhr; }#兼容 function ajax1() { var xhr = getXHR(); xhr.open(‘POST‘,‘/ajax_json/‘); xhr.onreadystatechange = function () { if(xhr.readyState == 4){ //接收完毕 console.log(xhr.responseText); } }; xhr.setRequestHeader(‘k1‘,‘v1‘); xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘); xhr.send("name=root;pwd=123"); } </script> </body> </html>
jquery ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text"/>
<input type="button" value="ajax1" onclick="ajax1()"/>
<script>
function ajax1() {
$.ajax({
‘url‘:‘/ajax_json‘,
‘type‘:‘POST‘,
‘data‘:{‘k1‘:‘v1‘},
success: function (arg) {
console.log(arg)
}
})
}
</script>
</body>
</html>
伪类ajax
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="/ajax_json/" method="POST" target="if1"> <iframe class="if1" name="if1"></iframe> <input type="text" name="username"/> <input type="submit" value="提交" onclick="submitForm();"/> </form> <script>function submitForm() { $(‘#if1‘).load(function () { var text = $(‘#if1‘).contents().find(‘body‘).text(); var obj = JSON.parse(text) }) } </script> </body> </html>
views.py
def ajax_json(request): print(request.POST) ret = {‘data‘:request.POST.get(‘username‘),‘status‘:True} return HttpResponse(json.dumps(ret))
以上是关于ajax的主要内容,如果未能解决你的问题,请参考以下文章