js使用技巧总结

1，onclick有效是结合alter弹出框

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script type="text/javascript">
  7.         function send_mail(){
  8.         alert("Click button");
  9.         }
  10.     </script>
  11. </head>
  12. <body>
  13.     <input type="button" onClick="send_mail()" value="button"/>
  14. </body>
  15. </html>

2，document.getElementById('id')  和 document.getElementsByName('name')

因为id是唯一的，所以document.getElementById('id')  得到的是单个元素，document.getElementsByName('name')得到的是一个数组，可以for循环取得数组的每一个值。

3，学些下这个

  1. <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>
  1. 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中的内容：

  1.  var content = document.getElementById('add_address_list').value;

采用jquery方式 取值 方法如下：

  1.  var  content = $("#add_address_list").val()

同理，点击按钮，重置或者清空textarea中的数据

  1. function ClearTextArea()
  2.   {
  3.      document.getElementById("user1").value="";
  4.   }

或者

  1. function clean(){
  2.      $("#user1").val("");
  3. }

5，js 数组,字符串,json互相转换

数组转字符串

  1. var arr = [1,2,3,4,'巴德','merge'];
  2. var str = arr.join(',');
  3. console.log(str); // 1,2,3,4,巴德,merge

字符串转数组

  1. var str = '1,2,3,4,巴德,merge';
  2. var arr = str.split(',');
  3. console.log(arr);     // ["1", "2", "3", "4", "巴德", "merge"]   数组
  4. console.log(arr[4]);  // 巴德

字符串转数组，数组转数组格式化，数组格式化转数组

  1. var str = '1,2,3,4,巴德,merge';
  2. var arr = str.split(',');
  3. var strify = JSON.stringify(arr);
  4. console.log(arr);       // ["1", "2", "3", "4", "巴德", "merge"]   数组
  5. console.log(arr[4]);    // 巴德
  6. console.log(strify);    // ["1", "2", "3", "4", "巴德", "merge"]   字符串
  7.  
  8. var arrParse = JSON.parse(strify);
  9. console.log(arrParse);  // ["1", "2", "3", "4", "巴德", "merge"]   数组

6，js中字符串拼接

  1. var lang = "Java";
  2. 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

Django:之传递数据给JS、Ajax和Ajax CSRF认证

js中完成操作想把值（数组）传回views.py和数据库

用Ajax，Ajax有很多种写法，包括JQuery和JS，这里贴一个用JQuery写的最通用的Ajax，POST方法传递JSON格式数据：

  1. $.ajax({
  2.     url: "your url",
  3.     data: JSON.stringify({    // JSON格式封装数据
  4.         name: xxx,
  5.         age: xx
  6.     }),
  7.     contentType: 'application/json',
  8.     type: "POST",
  9.     traditional: true,    // 需要传递列表、字典时加上这句
  10.     success: function(result) {
  11.     }
  12.     fail: function(result) {
  13.     }
  14. });

然后view.py里接收以上数据时，由于这里我用了JSON格式传递，因此需要反序列化：

  1. # coding=utf-
  2. import json
  3.  
  4. def func(request):
  5.     json_receive = json.loads(request.body)
  6.     name = json_receive['name']
  7.     age = json_receive['age']
  8.     ...

如果不想在JS里转换格式，直接传递的话，view.py中这么写：

  1. # coding=utf-
  2.  
  3. def func(request):
  4.     # 如果Ajax使用了GET方法，把下面的POST换成GET即可
  5.     name = request.POST['name']
  6.     age = request.POST['age']
  7.     ...

js使用笔记的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  3. js读书笔记

    js读书笔记 基本类型的基本函数总结 1. Boolean() 数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 "&q ...

  4. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  5. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  6. node.js系列笔记之node.js初识《一》

    node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...

  7. JS面向对象笔记二

    菜单导航,<JS面向对象笔记一>,  参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...

  8. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  9. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  10. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

随机推荐

  1. Linux增加sudo用户

    1.  root用户编辑文件/etc/sudoers vi /etc/sudoers 2.  按yy复制行root   ALL=(ALL)      ALL 按p粘贴,修改 “root” 为添加的用户 ...

  2. 谈谈TCP的四次挥手

    “挥手”是为了终止连接,TCP四次挥手的流程图如下: (在socket编程中,可以由客户端或服务端进行close操作来进行) 下面的图是由客户端主动关闭连接 MSL是什么?最长报文段寿命 ------ ...

  3. (转发)IOS高级开发～Runtime（三）

    11.系统类的方法实现部分替换 - (void) methodExchange { Method m1 = class_getInstanceMethod([NSStringclass],@selec ...

  4. 使用 CFile 的子类 CStdioFile 的注意事项

    目前为止只用到了 ReadString,也了解了一下 WriteString. 由于程序需要,本来程序中是用的CFile, 但是需要逐行读取文件数据,所以谷歌找到了 ReadString 类 —— 继 ...

  5. CentOS7 中使用 firewall-cmd 控制端口和端口转发

    0X00 firewalld 守护进程 firewall-cmd命令需要firewalld进程处于运行状态.我们可以使用systemctl status/start/stop/restart fire ...

  6. Virt-install用法：

       #一般选项:指定虚拟机的名称.内存大小.VCPU个数及特性等 -n  NAME,  --name=NAME:虚拟机名称,需全局惟一: -r  MEMORY,  --ram=MEMORY:虚拟机内 ...

  7. 【dp】守望者的逃离

    妙 题目描述 恶魔猎手尤迪安野心勃勃,他背着了暗夜精灵,率领深藏在海底的娜迦族企图叛变.守望者在与尤迪安的交锋中遭遇了围杀,被困在一个荒芜的大岛上.为了杀死守望者,尤迪安开始对这个荒岛施咒,这座岛很快 ...

  8. select2插件+ajax笔记

    目录 手册 思路 1. 如果是自己写的ajax这样就可以了. html里 控制器里 2. 如果是ecshop里,需要改写call方法为JQuery的ajax方法,才可以select2需要JQuery支 ...

  9. python3.6 取整除法

    python3.6 中取整除法运算逻辑如下: d 非零,那么商 q 满足这样的关系: a = qd + r ,且0 ≤ r n1=7//3 #7 = 3*2 +1 n2=-6.1//3 #-7 = 3 ...

  10. flask-mail（qq邮箱）

    from flask_mail import Mail,Message app.config['MAIL_SERVER']='smtp.qq.com' app.config['MAIL_PORT'] ...