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