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与Vue语法冲突问题完美解决方法
当我们在django web框架中,使用vue的时候,会遇到语法冲突. 因为vue使用{{}},而django也使用{{}},因此会冲突. 解决办法1: 在django1.5以后,加入了标签: {% ...
- ip地址设备信息
其实是个小问题,在项目中遇到要获取手机ip地址和mac地址的问题,mac地址获取用appcan的uexDevice插件可以实现. 但是ip地址,获取的方式很多,具体有搜狐/腾讯/新浪等提供的接口.但是 ...
- cmd - - - 随笔
dxdiag DirectX诊断工具 calc 计算机 cmd里面不想一点点输入冗长的文件路径?直接把这个文件拖到CMD窗口吧!你会发现 路径自己补上去了.有空格的还会自动加引号哟.
- Oracle分页总汇
Oracle分页总汇 select * from (select a.*,rownum row_num from (select * from mytable t order by t.id desc ...
- 【leetcode刷题笔记】Anagrams
Given an array of strings, return all groups of strings that are anagrams. Note: All inputs will be ...
- htmlParser的使用-链接
基于htmlparser实现网页内容解析:http://www.cnblogs.com/coding-hundredOfYears/archive/2012/12/15/2819217.html ht ...
- 剑指offer之 旋转数组的最小数字
package Problem8; public class MinInReversingList { /* * 题目描述:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. * 输入 ...
- 51nod 1525 && CF566D
题意:给定n个元素,现在有2种合并操作和1种询问操作 1.单独合并两个元素所在的集合 2.合并一个区间内的元素所在的集合 询问:两个元素是否属于统一集合 神犇题解 感觉又涨了新姿势啊..我们最恼火的是 ...
- java.io.InvalidClassException 异常解决, 实现Serializable接口的注意事项
解决方案: 在类中显式指定 private static final long serialVersionUID = 42L; 类实现序列化接口, 进行序列化反序列化的时候, 抛出 java.io.I ...
- IntelliJ IDEA Sringboot 项目部署到外部Tomcat服务器
<packaging>war</packaging> 添加依赖 <dependency> <groupId>org.springframework.bo ...