标签：middle success 节点 cookie ajax ice publish button parent
基于javascript
<script>
$(".btn_submit").click(function () { /js语法格式: $ 即jquery “.btn" .标识class属性 "#usr" #标识id属性
const usr = $("#usr").val(); / val()获取值， 即获取id为usr的标签的值。 val(1) 赋值
const pwd = $("#pwd").val();
$.ajax({
url: "{% url "login" %}", /ajax请求路径
type: "post", /ajax请求方法
data: { /ajax请求内容(参数), 即请求体
csrfmiddlewaretoken: "{{ csrf_token }}", /post请求需要携带的csrf_token认证
usr: usr,
pwd: pwd
},
success: function (response) { / 回调函数, 服务器响应成功后执行的函数,response,响应内容即响应体
const res_obj = JSON.parse(response);
if (res_obj.user){
$(".errshow").html("登陆成功")
}else{
$(".errshow").html(res_obj.err)
}
}
})
})
</script>
js中的text()，html() ，val()的区别
text()，html() ，val()三个方法用于html元素的存值和取值
js遍历
each
$.each(obj, function(i, j){
console.log(i,j)
})
查找父节点
$(this).parent()
<table class="table table-bordered table-hover table-striped">
{% csrf_token %}
<thead>
<tr>
<th>编号</th>
<th>书籍名称</th>
<th>价格</th>
<th>出版日期</th>
<th>出版社</th>
<th>作者</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for book in book_list %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ book.title }}</td>
<td>{{ book.price }}</td>
<td>{{ book.pub_date|date:‘Y-m-d‘ }}</td>
<td>{{ book.publish.name }}</td>
<td>
{% for author in book.authors.all %}
{{ author.name }}
{% if not forloop.last %}
|
{% endif %}
{% endfor %}
</td>
<td>
<a href="{% url ‘bookdel‘ book.nid %}" class="btn btn-danger btn-sm">删除</a>
<button pkid="{{ book.nid }}" data_url="{% url ‘bookdel‘ book.pk%}" class="btn btn-danger btn-sm btn_dele">ajax删除</button>
<a href="{% url ‘bookedit‘ book.nid %}" class="btn btn-warning btn-sm">编辑</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
通过button删除一个tr节点，即一条显示的记录
<script>
$(".btn_dele").click(function () { //class属性btn_dele
var pkid = $(this).attr("pkid"); //获取button的自定义属性pkid的值
var ele = $(this).parent().parent()
var book_url = $(this).attr("data_url")
//$(this).parent():button的父节点td，td的父节点tr
$.ajax({
url:book_url,
type: "post",
data: {
csrfmiddlewaretoken:$(‘[name="csrfmiddlewaretoken"]‘).val()
},
success: function (response) {
const res = JSON.parse(response);
if (res.succ) {
ele.remove()
}
}
})
})
</script>
ajax 反向解析动态传参
<button pkid="{{ book.nid }}" data_url="{% url ‘bookdel‘ book.pk%}" class="btn btn-danger btn-sm btn_dele">ajax删除</button>
js中获取自定义属性值, ajax中url定义变量
var book_url = $(this).attr("data_url")
$.ajax({
url:book_url,
type:"post",
........
})
标签自定义属性
<h1 a="zidingyi"></h1>
form表单input标签submit属性与表单里的button按钮触发post请求。如果不需要form表单发送post请求，ajax发送，将input标签type改为button
<form action="{% url ‘login‘ %}" method="post">
{% csrf_token %}
<label for="user"></label>
UserName: <input type="text" id="user" name="user">
<label for="pwd"></label>
Password: <input type="text" id="pwd" name="pwd">
<input type="button" value="提交"> //type属性为button，form表单不会发送get或post请求
</form>
csrf_token验证：post
前端form表单中取隐藏标签属性值放入data中post到后端
$.ajax({
data:{
csrfmiddlewaretoken:$(‘[name="csrfmiddlewaretoken"]‘).val()
}
})
ajaxSetup：django将csrftoken传送到前端，前端post时携带这个值
$.ajaxSetup({data:csrfmiddlewaretoken=‘{{csrf_token}})
发送contenttype类型数据时,通过获取响应返回的cookie中的字符串， 放置在请求头中发送。需要引入一个jquery.cokkie.js插件
{%load static%}
<script src="{% static ‘js/jquery.cookie.js‘%}"></script>
$.ajax{{
head:{"X-CSRKtoken":$.cookie("csrftoken")},
}}
标签：middle success 节点 cookie ajax ice publish button parent
原文地址：https://www.cnblogs.com/relaxlee/p/12842868.html
