js拼的onclick调用方法需要注意的地方 之一
2017-05-16 14:36
531 查看
1.首先,明确一点,js方法中参数可以传递字符串,对象,number类型等,对象传递的是引用,方法中修改了,会影响到方法外面的对象。
2.下面重现项目中遇到的一个问题:(其实就是要明白通过引号来拼接字符串时的问题)
有一个通用的js方法如下:
方法参数需要一个json对象,然后通过JSON.stringify(obj)方法转换为json字符串,传递到后台。
(1)。直接在jsp中onclick方法调用该方法:
这样是最简单的,方法中直接传递json对象就可以了。
(2)第二种方法。
如下,有一个div,通过js动态拼接了一个a标签放到div中,a标签中拼出来onclick中的方法:
这getA方法中通过字符串拼接出了A标签,里面onclick中方法参数其实和第一种是一样的,不过外层有一个单引号,所有参数的单引号进行了转义。这种和第一种是一样,传递的也是json对象
(3)这种是第二种的衍生,需要特别注意,这次onclick中参数是通过变量传递进去的
如果是这样写的,会报错obj未定义,因为a是字符串,obj不是用的上面的var obj变量,所以js解析器不认识obj。
如果是这样,那'obj'就是字符串传递到方法中的,不是用的var的那个obj对象。也不行。
很多人肯定会这样拼接自己定义的obj 对象变量,但是这样也是不可以的,这个obj变量拼在字符串中是一个对象引用,并不是{'projectId':123,'projectName':'aac'},拼出来方法会变成这样的sendTcMail([object Object]),会报错的,这种错误是最常见的,这是这篇博客的重点,要知道这错误的原因。
如果只是传递obj对象中的projectId属性可以这样拼接:
这传递到方法中的就是obj的projectId属性值123,这是可以的。
2.下面重现项目中遇到的一个问题:(其实就是要明白通过引号来拼接字符串时的问题)
有一个通用的js方法如下:
//邮件催送 sendTcMail = function(obj) { //异步请求查询级联子列表的方法并返回json数组 jQuery.ajax({ url : cur_url+"/tapeoutCheck/mailReminder", type : 'post', data : JSON.stringify(obj), dataType : 'json', contentType:'application/json;charset=utf-8', success : function (data, textStatus) { if (data.success == 1) { $.gritter.add({ title: '提示', text: '操作成功.'+data.message, class_name: 'success' }); } if (data.success == 2) { $.gritter.add({ title: '提示', text: '操作失败.'+data.message, class_name: 'danger' }); } }, error: function (XMLHttpRequest, textStatus) { $.gritter.add({ title: '提示', text: '邮件催送失败.', class_name: 'danger' }); } }); }
方法参数需要一个json对象,然后通过JSON.stringify(obj)方法转换为json字符串,传递到后台。
(1)。直接在jsp中onclick方法调用该方法:
<a href="javascript:void(0);" onclick="sendTcMail({'projectId':223,'projectName':'abc'})">test</a>
这样是最简单的,方法中直接传递json对象就可以了。
(2)第二种方法。
如下,有一个div,通过js动态拼接了一个a标签放到div中,a标签中拼出来onclick中的方法:
<div id="test"></div> $(function() { getA = function(){ var a = '<a href="javascript:void(0);" onclick="sendTcMail({\'projectId\':223,\'projectName\':\'abc\'})">test</a>'; $('#test').html(a); } getA(); })
这getA方法中通过字符串拼接出了A标签,里面onclick中方法参数其实和第一种是一样的,不过外层有一个单引号,所有参数的单引号进行了转义。这种和第一种是一样,传递的也是json对象
(3)这种是第二种的衍生,需要特别注意,这次onclick中参数是通过变量传递进去的
getA = function(){ var obj = {'projectId':123,'projectName':'aac'}; var a = '<a href="javascript:void(0);" onclick="sendTcMail(obj)">test</a>'; $('#test').html(a); }
如果是这样写的,会报错obj未定义,因为a是字符串,obj不是用的上面的var obj变量,所以js解析器不认识obj。
getA = function(){ var obj = {'projectId':123,'projectName':'aac'}; var a = '<a href="javascript:void(0);" onclick="sendTcMail(\'obj\')">test</a>'; $('#test').html(a); }
如果是这样,那'obj'就是字符串传递到方法中的,不是用的var的那个obj对象。也不行。
getA = function(){ var obj = {'projectId':123,'projectName':'aac'}; var a = '<a href="javascript:void(0);" onclick="sendTcMail('+obj+')">test</a>'; $('#test').html(a); }
很多人肯定会这样拼接自己定义的obj 对象变量,但是这样也是不可以的,这个obj变量拼在字符串中是一个对象引用,并不是{'projectId':123,'projectName':'aac'},拼出来方法会变成这样的sendTcMail([object Object]),会报错的,这种错误是最常见的,这是这篇博客的重点,要知道这错误的原因。
如果只是传递obj对象中的projectId属性可以这样拼接:
getA = function(){ var obj = {'projectId':123,'projectName':'aac'}; var a = '<a href="javascript:void(0);" onclick="sendTcMail('+obj.projectId+')">test</a>'; $('#test').html(a); }
这传递到方法中的就是obj的projectId属性值123,这是可以的。
相关文章推荐
- js拼的onclick调用方法需要注意的地方 之二
- JS调用Andrioid方法传递参数,Android需要知道的一个注意点
- js中使用split方法需要注意的地方
- ArrayList调用remove方法需要注意的地方
- html页面触发js里面的方法时,传递的参数写法需要注意的地方。
- C++中方法定义和调用需要注意的一个地方
- C++中方法定义和调用需要注意的一个地方
- jsp 在超链接上调用onclick,js方法函数,a标签
- C# 检查网络是否连通 判断远程文件是否存在 C#获取程序路径的方法中需要注意的地方
- asp.net中js和jquery调用ashx的不同方法分享,需要的朋友可以参考一下
- paip.提升用户体验---网站程序HTML,JS需要注意的地方
- 【PHP小错误整理】在类面调用自定义方法需要注意的问题
- BufferedReader的read和readLine方法使用需要注意的地方
- 开发日志:onclick调用js方法传递多个使用struts标签获取的参数
- PHP中通过调用call_user_func_array函数执行mysqli_stmt_bind_param方法时需要注意的问题
- js中onclick事件同时调用两个方法
- 在页面里JS代码里onclick去调用后台文件中的一个方法
- C#获取程序路径的方法中需要注意的地方
- 一个内部类定义在外部类方法中的的例子(调用参数的时候需要注意final来修饰)
- C#获取程序路径的方法中需要注意的地方