js-3part-Javascript使用Ajax
2024-10-21 11:32:38
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里面的参数写错的地方,纠正的博客
最新文章
- Linux虚拟机添加新硬盘的全程图解
- ThinkPHP 3.2.3(一)基础
- IE8中给HTML标签负值报错问题
- javascript 字符转换为ascii码,ascii码转换为字符
- Java笔记4-do while循环,break,修饰符,方法的调用
- 由底层和逻辑说开去--c++之引用的深入剖析
- DIV+CSS 网页布局之:混合布局
- DataGrid导出excel
- TCP/IP详细说明--滑模、拥塞窗口、慢启动、Negle算法
- 201521123098 《Java程序设计》 第4周学习总结
- ERROR! MySQL server PID file could not be found!的解决方法
- 【Win 10 应用开发】MIDI 音乐合成——音符消息篇
- CSS中的一下小技巧1之CSS3三角形运用
- css子元素添加绝对定位,不添加top、left会有影响吗???
- input autocomplete属性设计输入框自动联想(php实现)
- PHP 计算两个时间戳之间相差的时间
- Gym 101617J	Treasure Map(bfs暴力)
- hello1 web项目中web.xml作用分析
- Swift5 语言指南(二十八) 高级运算符
- 最应该注意的Oracle版本之一
热门文章
- jmeter接口自动化-读取CSV文件执行测试用例
- db2 linux创建用户后,登录报错
- 【转载】rename。给文件批量改名的python脚本
- 2.4G收发一体芯片NRF24L01P跟国产软硬件兼容 SI24R1对比
- TIDB-DM数据迁移第一部(安装部署)
- 解决python 操作 hbase报错:TTransportException(type=4,message=’TSocket read 0 bytes’)
- oracle ebs 加锁
- <;input>; oninput事件
- python34
- python调用C库的方法