js拼的onclick调用方法需要注意的地方 之一

1.首先，明确一点，js方法中参数可以传递字符串，对象，number类型等，对象传递的是引用，方法中修改了，会影响到方法外面的对象。

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，这是可以的。