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 

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-8
import json

def func(request):
    json_receive = json.loads(request.body)
    name = json_receive['name']
    age = json_receive['age']
    ...

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

# coding=utf-8

def func(request):
    # 如果Ajax使用了GET方法，把下面的POST换成GET即可
    name = request.POST['name']
    age = request.POST['age']
    ...

 

posted @ 2017-06-01 11:23  番茄土豆西红柿  阅读(291)  评论(0)  编辑  收藏  举报
TOP