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,这是可以的。
带着疑问去思考,然后串联,进而归纳总结,不断追问自己,进行自我辩证,像侦查嫌疑案件一样看待技术问题,漆黑的街道,你我一起寻找线索,你就是技术界大侦探福尔摩斯