js-3part-Javascript使用Ajax
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里面的参数写错的地方，纠正的博客
