getElementsByName使用方法
如下是input标签，我们尝试从里面获取到csrf的value值。
这个csrf标签，是隐藏的，在浏览器页面element可以看到，在html源码里面，是看不到如下的input标签的
<input type="hidden" name="csrfmiddlewaretoken" value="fR1iMAQxRgiHEwopw1cnGgBDyNAx2jSBRE1bkfJsqWdZUea7HBviTK2nmmqJPCby">

真正在html源码里面的写法是这样的：
<body>

{% csrf_token %}

</body>

用getElementsByName写作如下格式

csrf_token = document.getElementsByName("csrfmiddlewaretoken")[0].value

getElementsByName获取的是一个数组，所以取值，需要用索引，即便这个数组里面，只有一个值，也需要用索引取值。然后指定到单个的值，才能用value拿到标签里面value的结果

原生js的Ajax写法，这个在网上比较少，今天把简单的用法写下来

function ajax_func() {  # 这是正常的函数定义

     console.log("hello world");  # 这里先测试函数是否生效

    csrf_token = document.getElementsByName("csrfmiddlewaretoken")[0].value;  # 接上面，尝试获取csrf标签值

    xmlhttp = new XMLHttpRequest();

     xmlhttp.open("POST", "/manage_sys/try_write_attend/", true);  # 设置method；url；最后一个参数，是否设置异步请求，true异步，false同步。

     xmlhttp.setRequestHeader("x-csrftoken", csrf_token);  # 设置csrf请求头，这里需要注意，在原生js里面，请求头的键就是”x-csrftoken“，这个跟jQuery的键不一样。

　　　xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")     # 如果需要传递参数，这里的请求头必须带上，指定请求数据格式，否则数据无法传输过去
　　　xmlhttp.send("name=peter&pwd=123")  # 这里的send（）里面只能是string格式，用键值对方式写，中间用&隔开

 }

如下是带有返回结果的完整版

<script>

        function getNewData(className, name) {

            if (className) {

                let original_document_l = document.getElementsByClassName(

                    className

                );

                let new_data_li = [];

                for (let first_index = 0;

                     first_index < original_document_l.length;

                     first_index++) {

                    new_data_li.push(

                        original_document_l[first_index].innerText

                    );

                }

                return new_data_li

            }

            else if (name) {

                let original_date_li = document.getElementsByName(name);

                let new_date_li = [];

                for (let first_index = 0;

                     first_index < original_date_li.length;

                     first_index++) {

                    new_date_li.push(

                        original_date_li[first_index].value

                    )

                }

                return new_date_li

            }

        }

    </script>

    <script>

        function ajax_func() {

            console.log("hello world");

            let xmlHttp;

            let str_data_loads_json;

            let person_id_data = getNewData("person_id", null);

            let person_name_data = getNewData("person_name", null);

            let date_li = getNewData(null, "date");

            let json_data = JSON.stringify(    # 这里是重点，如果想把完整的数据结构传入到Ajax的send里面，就得用json包裹一层

                {

                    name_li: person_name_data,

                    id_li: person_id_data,

                    date_li: date_li

                }

            );

            str_data_loads_json = "data=" + json_data;    # 把上面包裹的json完整数据格式，跟字符串在这里拼接一下，就能直接放到send里面了

            let csrfToken = document.getElementsByName(

                "csrfmiddlewaretoken"

            )[0].value;

            xmlHttp = new XMLHttpRequest();

            xmlHttp.open("POST", "/manage_sys/try_write_attend/", true);

            xmlHttp.setRequestHeader("x-csrftoken", csrfToken);

            xmlHttp.setRequestHeader(

                "Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"

            );

            xmlHttp.send(str_data_loads_json);
　　　　　　　xmlHttp.onreadystatechange=function (data) {    # 这里是回调函数，类似于jQuery的Ajax里面的success跟error，上面的Ajax请求发过去之后，XMLHttpRequest对象中的readyState会发生变化，
readyState一旦发生变化，就会触发这个函数onreadystatechange，我们可以在这个函数下面做一些简单反馈信息给到用户页面。
　　　　     　　if(xmlHttp.readyState===4 &&
        　　　　　　(xmlHttp.status===200||xmlHttp.status===304)   # 这里是对请求状态的判断，readyState有5中状态码：0，1，2，3，4；status有200，404.这里的304是我抄的别人的博客，
自己并没有试出来304是什么效果。
    　　　　　　 ){
　　        　　　　let response_data = data.target.response;    # 这里是回调函数的重点，上面的两行注释，有很多其他的博客可以提供线索，这里一行里面的内容，是我自己试出来的，在后端反馈的json数据中，
把回调函数的参数，也就是后端传过来反馈的json数据，打印出来，是一个object对象，里面包含很多的信息，一层一层拨开找到了后端传过来的数据，是string格式，我这里是通过data.target.response获取的，如果不是同样的object
这样是没法取到值的。data.currentTarget.response这样跟我上面写的方法取到的数据是一样的。
　　　　　　　　　　 let parsed_data = JSON.parse(response_data);    # 取到的值是string，用json解析成对象就能拿到后端传入的原形数据结构值。
　　　　　　　　　　 console.log(parsed_data.data,typeof(parse_data));
} </script>

为了便于理解上面的回调函数参数，这里把后端的返回结果贴一下

return HttpResponse(json.dumps({"data": 10086}))
这里10086就是数字类型，json本来就支持int类型存储，用上面的回调函数，取到值，json再解析出来，就是我这里后端传过去的数据。

部分参考博客，下面的博客，每一篇都不是全对的，有的不全，有的写错了，可能是更新不及时，不能全部照抄，得自己试过：

https://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html

对于回调函数的解释，菜鸟教程里面比较详细。

https://javascript.ruanyifeng.com/bom/ajax.html#toc16

这是阮一峰的博客，对于数据传递处理的参数，介绍得很全面

https://stackoverflow.com/questions/6418220/javascript-send-json-object-with-ajax

这是补充上面阮一峰关于post，headers里面的参数写错的地方，纠正的博客

js-3part-Javascript使用Ajax的更多相关文章

  1. JavaScript、Ajax与jQuery的关系 分类： C1_HTML/JS/JQUERY 2014-07-31 10:15 3388人阅读 评论(0) 收藏

    简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...

  2. 最新JavaScript、Ajax典藏级学习资料下载分类汇总 (2011年12月21日更新)

    其他网站开发相关资料            超强HTML和xhtml,CSS精品学习资料下载汇总                                               最新htm ...

  3. 了不起的Node.js: 将JavaScript进行到底（Web开发首选，实时，跨多服务器，高并发）

    了不起的Node.js: 将JavaScript进行到底(Web开发首选,实时,跨多服务器,高并发) Guillermo Rauch 编   赵静 译 ISBN 978-7-121-21769-2 2 ...

  4. 初识JavaScript，Ajax，jQuery，并比较三者关系

    一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...

  5. Javascript与Ajax

    不使用jquery来处理ajax请求该怎么做? 首先要明确html中的某些数据需要从服务端获得,也就是客户端向服务端请求(request)数据,服务端就响应(response)这个请求,把客户端要的数 ...

  6. javascript进阶——Ajax

    统的Web 页面和应用中,用户每点击页面上的某个部分,浏览器就会向服务器发出一个请求,等待服务器做出响应,然后返回一个完整新网页,但在大多数情况下用户不得不忍受页面闪烁和长时间的等待.随着Web技术的 ...

  7. Javascript and AJAX with Yii（在yii 中使用 javascript 和ajax）

    英文原文:http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii /*** http://www.yiiframework. ...

  8. javascript实现ajax

    什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...

  9. JavaScript和ajax 跨域的案例

    今天突然想看下JavaScript和ajax 跨域问题,然后百度看了一下,写一个demo出来 <!DOCTYPE html> <html xmlns="http://www ...

  10. JavaScript、Ajax与jQuery的关系

    简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...

随机推荐

  1. postgresql数据库插入和读取图片

    postgresql插入和读取图片 postgresql存储图片需要二进制类型bytea,创建一张测试表: postgres=# create table test_image(img bytea); ...

  2. [转载]Linux关于磁盘操作命令

    一.查看篇 1.1.du : 查看文件和 目录的使用空间 语法: du [参数]  [文件或目录] 参数 说明 -a 列出所有的文件与目录容量. -h 以G.M.K为单位,返回容量. -s 列出总量. ...

  3. idea字体的大小设置

    idea字体大小设置 两个方法,滚轮.固定大小设置 固定字体大小 file--settings--editor--font--size 修改为需要大小字号,例如20,点击ok 菜单栏的大小设置也差不多 ...

  4. Java设计模式——装饰器模式(Decorator)

    今天上课讲了java设计模式中的装饰器模式--Decorator,由于早上起的很早,肚子也很饿,知识点本身也晦涩难懂,听的云里雾里的,所以在课下对这块的知识做出一些总结. 定义 装饰器模式又名包装(W ...

  5. Delphi模拟win+tab按键效果

    //按下左侧win键 keybd_event(VK_LWIN,0,0,0); //按下tab键 keybd_event(VK_TAB,0,0,0); //抬起左侧win键 keybd_event(VK ...

  6. 剑指 Offer II 回溯法

    086. 分割回文子字符串 用substr枚举 因为是连续的 不是放与不放的问题 class Solution { public: vector<vector<string>> ...

  7. socket-消息发送实战

    1. 函数用法 Handle.oobtainMessage(int what ,int arg1,int arg2,object obj)  2. 消息内容  3. 代码组合(隐私模式开关) 3.1 ...

  8. centos8使用kubeadm搭建高可用k8s集群

    kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具. 这个工具能通过两条指令完成一个kubernetes集群的部署: # 创建一个 Master 节点 kubeadm ini ...

  9. 随机数Random和SecureRandom

    "Random" objects should be reused Bug Critical Main sources owasp-a6 Available SinceNov 16 ...

  10. PCB Layout之EMMC_Flash走线总结@@@

    PCB Layout之EMMC_Flash走线总结 1,数据线DATA[0-7]走线要(基本)等长(含芯片内部线长),线要短,线间距控制3W原则,参考面要完整(参考面下面最好不要走其它高速信号线),阻 ...