引用
jQuery 是一个 JavaScript 库，不需要安装，直接引用就行
<!-- jQuery -->
<script src="/static/vendors/jquery/dist/jquery.min.js"></script>
语法
$(selector).action() #$定义jquery #selector是html元素选择器 #action()对元素执行操作
文档就绪事件
$(document).ready(function(){
// 开始写 jQuery 代码...
});
或者
$(function(){
// 开始写 jQuery 代码...
});
有多个函数时：
$(function () {
datatable_func()
access_key();
flush_key();
delete_key();
});
#防止在DOM加载完之前就执行jquery代码
#一般在写jquery时，先上一个$(function (){}把所有函数放进去，然后下面再写函数
点击响应事件
<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="this is jQuery"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
<!-- jQuery -->
<script src="/static/vendors/jquery/dist/jquery.min.js"></script>
<script>
$(function () {
myFunction()
});
function myFunction()
{
$("#btn1").click(function () {
$("#test1").text('<h3>hello jQuery</h3>');
});
$("#btn2").click(function () {
$("#test2").html('<h3>hello jQuery</h3>');
});
$("#btn3").click(function () {
$("#test3").val('hello jQuery');
});
}
</script>
</body>
#text() - 设置或返回所选元素的文本内容
#html() - 设置或返回所选元素的内容（包括 HTML 标记）
#val() - 设置或返回表单字段的值
Ajax
function flush_key()
{
$("#flush_status").click(function () {
$.ajax({
url:"{% url 'salt_key_update' %}",
success: function (arg) {
if(arg){
window.location.href = "{% url 'salt_key_list' %}";
}
}
});
});
}
#在salt_key_list页面
#由id=flush_status的button click触发函数
#使用ajax函数，请求salt_key_update
#请求成功时，如果有参数返回，则定向到salt_key_list
function download_log()
{
$("#log_download").click(function () {
$.ajax({
url:"{% url 'log_download' %}",
type:"POST",
data:{'server':$("#id_server").val(),'subtype':$("#id_subtype").val(),'logpath':$("#id_logpath").val()},
success: function (arg) {
if(arg){
window.location.href = arg;
}
}
});
});
}
#把三个参数发送给log_download，然后返回一个arg，请求这个arg
#下载url,由js响应
download_url = 'http://192.168.10.12/%s/files%s' %(server,zip_name_path)
return HttpResponse(download_url)
#download_url返回给js