js拼的onclick调用方法需要注意的地方 之二
那如果之前的方法不行,想传递json对象怎么办呢?
使用下面这种方法,
getA = function(){
var obj = {'projectId':123,'projectName':'aac'};
var objStr = JSON.stringify(obj);
console.info(objStr); var a = '<a href="javascript:void(0);" onclick="sendTcMail('+objStr+')">test</a>';
$('#test').html(a);
}
这里将json对象通过JSON.stringify(obj)方法转换成了json对象的字符串(其实就是obj外面加了双引号),就可以用在下面的a字符串中进行拼接,这样拼接出来,sendTcMail方法中就传递的是json对象,可是事实不如人意,浏览器渲染出来的并不是我们想要的效果,会发现引号错乱了,这是为什么呢?
原因就是:JSON.stringify(obj)方法转换的json字符串是通过双引号包裹的,虽然js单双引号都可以,但是在拼接a字符串时,最外层用的是单引号拼接的,所以拼接的objStr变量中也需要是用单引号包裹的;但是objStr变量是通过JSON.stringify(obj)方法来的,所以它并不是单引号就会出现拼接字符串引号不一致,导致浏览器解析html出来并不是我们想要的。
措施:将外层用双引号来拼接,修改如下:
getA = function(){
var obj = {'projectId':123,'projectName':'aac'};
var objStr = JSON.stringify(obj);
console.info(objStr); var a = "<a href='javascript:void(0);' onclick='sendTcMail("+objStr+")'>test</a>";
$('#test').html(a);
}
这样拼接就没问题了,最终拼接完之后objStr中的双引号会自动去掉的,所有组成的字符串a中,onclick方法sendTcMail中的参数传递的是json对象obj,并不是json字符串objStr。这点要清楚。
只要遇到拼接字符串,中间还有用到变量,那变量一定也要是字符串类型,如果是对象去直接拼接,就会是对象引用,不是我们要的对象内容,一定要注意。
js拼的onclick调用方法需要注意的地方 之二的更多相关文章
- js拼的onclick调用方法需要注意的地方 之一
1.首先,明确一点,js方法中参数可以传递字符串,对象,number类型等,对象传递的是引用,方法中修改了,会影响到方法外面的对象. 2.下面重现项目中遇到的一个问题:(其实就是要明白通过引号来拼接字 ...
- iOS js oc相互调用(JavaScriptCore)---js调用iOS --js里面通过对象调用方法
下来我们看第二种情况 就是js 中是通过一个对象来调用方法的. 此处稍微复杂一点我们需要使用到 JSExport 凡事添加了JSExport协议的协议,所规定的方法,变量等 就会对js开放,我们可以通 ...
- 转载 OS js oc相互调用(JavaScriptCore) ---js调用iOS ---js里面直接调用方法
OS js oc相互调用(JavaScriptCore) 接着上节我们讲到的iOS调用js 下来我们使用js调用iOS js调用iOS分两种情况 一,js里面直接调用方法 二,js里面通过对象调用 ...
- Js拼Json对象
我们通常会拼字符串,但是拼字符串的话,遇见占位符会出错. 下面分享一个拼js拼json对象的方法: var jsonArr = []; $ ...
- 关于js中函数的调用问题
js中函数的调用方法 1.直接调用 函数名(参数): 2.通过指向函数的变量去调用 例如: var myval = 函数名: 此刻 myval是指向函数的一个指针: myval(实际参数):此刻调用的 ...
- angularjs $swipe调用方法
angularjs 的$swipe,用法: $swipe.bind(angular.element(document),{ start: function(pos) { }, move: functi ...
- 【JS】<a>标签调用js中函数的几种方法
我们常用的在a标签中有点击事件: a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而 ...
- Magento中调用JS文件的几种方法
一.全局调用方法: 通过该方法每个页面都会引用这个JS文件,除非是类似jQuery这样的系统文件,不然不推荐这种方法. 文件路径:/app/design/frontend/default/Your_T ...
- JS函数的定义与调用方法
JS函数调用的四种方法:方法调用模式,函数调用模式,构造器调用模式,apply,call调用模式 1.方法调用模式:先定义一个对象,然后在对象的属性中定义方法,通过myobject.property来 ...
随机推荐
- 查看django的安装路径
查看django的安装路径 pip3 show django
- LeetCode:长度最小的子数组【209】
LeetCode:长度最小的子数组[209] 题目描述 给定一个含有 n 个正整数的数组和一个正整数 s ,找出该数组中满足其和 ≥ s 的长度最小的连续子数组.如果不存在符合条件的连续子数组,返回 ...
- HDU - 1134 Game of Connections 【DP】
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1134 题意 给出一个n 然后有2n个点 给两个点连一条边,最后连N条边,要求所有的边不能够交叉 问最多 ...
- Data Structure Stack: Reverse a stack using recursion
http://www.geeksforgeeks.org/reverse-a-stack-using-recursion/ #include <iostream> #include < ...
- [原创]Scala学习:函数的定义
方式一:标准的定义函数 def 函数名(参数1: 参数类型,参数2: 参数类型): 返回值类型 = { 函数体 } 例子 def max(x: Int,y: Int): Int ={ if(x > ...
- CSS整体布局
主要内容: 一.外边距margin与填充padding 二.浮动float与显示display 三.主布局 四.定位方式posotion 一.外边距margin与填充padding 1.margin设 ...
- 算法(Algorithms)第4版 练习 1.3.32
ADT: /** * see if Steque is empty * @return {@code true} Steque is empty * {@code false} Steque isn' ...
- F1 score,micro F1score,macro F1score 的定义
F1 score,micro F1score,macro F1score 的定义 2018年09月28日 19:30:08 wanglei_1996 阅读数 976 本篇博客可能会继续更新 最近在 ...
- java 多线程踩过的坑
多线程踩坑记录:1.多线程切记不可以同时操作同一个原子数据.解释:存在一个条数据库A数据,不可以在2个或2个以上的线程中同时操作A数据.会引发重复操作.2.多线程操作方法不要加synchronized ...
- python3 字典属性
1.字典创建 >>> D={} >>> D {} >>> D2={:,(,):::'d'}} #冒号构造 1.使用 { }和 : 直接创建 &g ...