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的主要内容,如果未能解决你的问题,请参考以下文章

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段

Spring MVC 3.2 Thymeleaf Ajax 片段