js使用笔记
js使用技巧总结
1，onclick有效是结合alter弹出框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function send_mail(){
alert("Click button");
}
</script>
</head>
<body>
<input type="button" onClick="send_mail()" value="button"/>
</body>
</html>
2，document.getElementById('id') 和 document.getElementsByName('name')
因为id是唯一的，所以document.getElementById('id') 得到的是单个元素，document.getElementsByName('name')得到的是一个数组，可以for循环取得数组的每一个值。
3，学些下这个
<table class="table table_pos" id="tb">
<!--<caption font-size="500">被拦截的邮件详细信息</caption>-->
<thead>
<tr>
<!--<th style="width: auto">#</th>-->
<th style="width: auto">时间</th>
<th style="width: auto">标题</th>
<th style="width: 10px">发件人</th>
<th style="width: auto">动作</th>
<th style="width: auto;visibility:hidden">message_id</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
window.onload = function () {
var datanav = {{ mail_detail_list |safe }}; ##mail_detail_list是一个列表，列表元素是字典
var tb = document.getElementById("tb");
for (var i = 0; i < datanav.length; i++) {
var row = tb.insertRow(tb.rows.length);
var c1 = row.insertCell(0);
c1.innerHTML = i+1; //编号
var c2 = row.insertCell(1);
c2.innerHTML = datanav[i].time;
var c3 = row.insertCell(2);
c3.innerHTML = datanav[i].title;
var c4 = row.insertCell(3);
c4.innerHTML = datanav[i].sender;
var c5 = row.insertCell(1);
c5.innerHTML = user_dropdown_memu;
var c6 = row.insertCell(5);
c6.innerHTML = datanav[i].message_id
}
}
4，得到textarea中的内容：
var content = document.getElementById('add_address_list').value;
采用jquery方式 取值 方法如下：
var content = $("#add_address_list").val()
同理，点击按钮，重置或者清空textarea中的数据
function ClearTextArea()
{
document.getElementById("user1").value="";
}
或者
function clean(){
$("#user1").val("");
}
5，js 数组,字符串,json互相转换
数组转字符串
var arr = [1,2,3,4,'巴德','merge'];
var str = arr.join(',');
console.log(str); // 1,2,3,4,巴德,merge
字符串转数组
var str = '1,2,3,4,巴德,merge';
var arr = str.split(',');
console.log(arr); // ["1", "2", "3", "4", "巴德", "merge"] 数组
console.log(arr[4]); // 巴德
字符串转数组，数组转数组格式化，数组格式化转数组
var str = '1,2,3,4,巴德,merge';
var arr = str.split(',');
var strify = JSON.stringify(arr);
console.log(arr); // ["1", "2", "3", "4", "巴德", "merge"] 数组
console.log(arr[4]); // 巴德
console.log(strify); // ["1", "2", "3", "4", "巴德", "merge"] 字符串 var arrParse = JSON.parse(strify);
console.log(arrParse); // ["1", "2", "3", "4", "巴德", "merge"] 数组
6，js中字符串拼接
var lang = "Java";
lang = lang + "Script";
7，判断字符串是否为空 if (str.length != 0) {}
8，判断字符串是否相等 if (name == "uname") {}
AJAX 专区
1，traditional默认是false，如果此时提交的数据是{"add_key":[11,22,33,44]}，那么django的request.POST收到的是
<QueryDict: {u'add_key[]': [u'11', u'22', u'33',u'44']}>
导致request.POST.get('add_key')无法获取值（因为现在的key是add_key[] ）
处理方法是在ajax体中添加
traditional: true,
django中views.py中的字典、列表传到前端js
把django的views.py中的值用json.dumps(data)通过{{data|safe}}很轻松传进javascript里
参考：
Django:之传递数据给JS、Ajax和Ajax CSRF认证
js中完成操作想把值（数组）传回views.py和数据库
用Ajax，Ajax有很多种写法，包括JQuery和JS，这里贴一个用JQuery写的最通用的Ajax，POST方法传递JSON格式数据：
$.ajax({
url: "your url",
data: JSON.stringify({ // JSON格式封装数据
name: xxx,
age: xx
}),
contentType: 'application/json',
type: "POST",
traditional: true, // 需要传递列表、字典时加上这句
success: function(result) {
}
fail: function(result) {
}
});
然后view.py里接收以上数据时，由于这里我用了JSON格式传递，因此需要反序列化：
# coding=utf-
import json def func(request):
json_receive = json.loads(request.body)
name = json_receive['name']
age = json_receive['age']
...
如果不想在JS里转换格式，直接传递的话，view.py中这么写：
# coding=utf- def func(request):
# 如果Ajax使用了GET方法，把下面的POST换成GET即可
name = request.POST['name']
age = request.POST['age']
...
js使用笔记的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- js读书笔记
js读书笔记 基本类型的基本函数总结 1. Boolean() 数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 "&q ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- node.js系列笔记之node.js初识《一》
node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...
- JS面向对象笔记二
菜单导航,<JS面向对象笔记一>, 参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
随机推荐
- python_81_标准库_时间模块
''' 标准库: 1.time 时间的三种表示方法:a:时间戳(timestamp) b:格式化的时间字符串 c:元组(struct_time)共九个元素 time.struct_time(tm_ye ...
- ES6中const的用法
const声明一个只读的常量.一旦声明,常量的值就不能改变.且const一旦声明变量,就必须立即初始化,不能留到以后赋值. const的作用域与let命令相同:只在声明所在的块级作用域内有效. con ...
- Java中什么是匿名对象，空参构造方法输出创建了几个匿名对象，属性声明成static
package com.swift; //使用无参构造方法自动生成对象,序号不断自增 public class Person { private static int count; //如果在定义类时 ...
- Framework的简单创建
如果你想将你开发的控件与别人分享,一种方法是直接提供源代码文件.然而,这种方法并不是很优雅.它会暴露所有的实现细节,而这些实现你可能并不想开源出来.此外,开发者也可能并不想看到你的所有代码,因为他们可 ...
- noip考前注意事项
明天就要离开学校,后天的现在Day1已经考完啦,临近考试了紧不紧张呢(不紧张才怪),那么考前我们应该注意点什么呢? 1.带好自己的证件,带好自己的证件,带好自己的证件,这很重要. 2.试机的时候一定要 ...
- 【思维题 单调栈】loj#2430. 「POI2014」沙拉餐厅 Salad Bar
t老师的做法好神…… 题目描述 桌面上有 n 个水果,分别是苹果和橘子.Bytea需要从水果中选择连续的一个区间,并从左到右或从右到左拿水果,且过程中橘子的数量必须始终不小于苹果的数量.求最长的区间大 ...
- destoon 支付异步接口文件 notify.php 调试方式
在if($verify_result) { 之前复制这三个变量 就可以直接访问notify.php 启用调试模式 或者 逐步echo 相关变量来调试 错误原因 notify.php没有入口文件 是 ...
- SEO 优化
1.什么是SEO优化: 简单的来说就是了解搜索引擎的排名规则,投机所好,让我们的网站在搜索引擎上得到靠前的排名,获取更多流量的一种方式. 2.SEO优化-衡量标准 关键词的排名--核心关键词的效果 收 ...
- 树莓派编译ncnn
1.从github上下载ncnn git clone --recursive https://github.com/Tencent/ncnn 2.在ncnn根目录下创建build目录,安装cmake编 ...
- Hadoop4.2HDFS测试报告之一
1.1 测试方案 1.1.1 测试目标 为了验证本地文件系统和HDFS存储能力对比,将1G文件组存储进各个文件系统,记录存储任务消耗的时间. l 测试HDFS的高可用性和高稳定性 l 测试 ...