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来 ...
随机推荐
- Eclipse +Tomcat配置-【菜鸟学JAVA】
说起来也惭愧,以前用(Unieap)工具搞了一年多的JAVA+Oracle,现在居然在Eclipse中配置tomcat都搞了半天时间,原来一直是做.NET的. 今天开始不再用集成的环境,话不多说,开始 ...
- Basis 基础
[转自 http://www.cnblogs.com/elegantok/archive/2008/11/03/1325163.html] 1 Basis1. Unix操作 更改口令 passwd e ...
- spark0.9.0安装
利用周末的时间安装学习了下最近很火的Spark0.9.0(江湖传言,要革hadoop命,O(∩_∩)O),并体验了该框架下的机器学习包MLlib(spark解决的一个重点就是高效的运行迭代算法),下面 ...
- Shell传参的多种方式
Shell 传参的多种方式 使用$1 $2 这种类似占位符的方式 # 命令行调用 start.sh 8080 9090 # 脚本中获取 port1=$1 # 8080 port2=$2 # 9090 ...
- java 类中定义接口的调用方法
public class Human { public interface MyAction { public void getPower(); } } public class Test{ publ ...
- java获取调用此方法的上面的方法名、类
StackTraceElement[] stacks = (new Throwable()).getStackTrace(); for (StackTraceElement stack : stack ...
- Python 3 面向对象 一
Python 3 面向对象 一.面向过程-->面向对象 面向过程:根据业务逻辑从上到下堆叠代码,即先干什么再干什么,基于面向过程去设计程序就好比在设计一条流水线,是一种机械式的思维方式 函数式: ...
- 【Flask】Column常用参数
### Column常用参数:1. primary_key:设置某个字段为主键.2. autoincrement:设置这个字段为自动增长的.3. default:设置某个字段的默认值.在发表时间这些字 ...
- wampserver2 配置ssl 经过验证 可用
本文原地址 http://blog.csdn.net/taosst/article/details/2182966 http://forum.wampserver.com/read.php?2,329 ...
- Echarts一个页面加载多个图表及图表自适应
Echarts一个页面加载多个图表及图表自适应 模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...