Web前端成长日记--传参

Ajax参数传递

通过ajax可以局部刷新网页内容，从而动态加载我们所需要的内容。这是一个标准的ajax函数：

$.ajax({
type:'get',
async:false,
url:,	//这里通常会有一个接口地址
data:
dataType:'jsonp',
jsonp:"callback",
beforeSend:function(){
$('#loading').show();
},
complete:
function(){
$('#loading').hide();
},
success:function(msg) {
if (msg == "false") {
alert("false");
} else {
alert(msg);		//下面写入的代码都会放在这里

}
}
})

</pre><p><span style="color:#000000;"></span></p><p><span style="color:#000000;">如果通过ajax调用的接口是键值对，也就是类似于</span></p><p><span style="color:#000000;"></span><pre name="code" class="html">[{key1:value1,key2,value2},{key3:value3,key4:value4},{key5:value5,key6:value6},...]

那么调用的时候可以通过遍历来传递键值对中的参数

$.each(msg, function(index, item) {

alert(item.key1); //这样会循环取到value1,value3,value5等值，以一个大括号为一次循环

})

 

当然最主流的方法还是调用json数据，比如要调用快递单号的接口

http://api.ickd.cn?id=110643&secret=eb24e4bde6b369466cb91e4b50b572a4&com='+hid+'&nu='+wuliucode+'&type=json

这是一个标准的物流信息接口，传入hid（物流公司编号）和wuliucode（快递单号）,就能传递json数据，如果将上面的type值改为html，也可以直接传递html信息。来看看json数据的接口如何调用。

这是一个圆通快递的接口，

{"status":"3","message":"","errCode":"0","data":[{"time":"2015-08-13 18:44","context":"XXX"},{"time":"2015-08-13 19:58","context":"XXX"},{"time":"2015-08-14 04:31","context":"XXX"},{"time":"2015-08-14 07:17","context":"XXX"},{"time":"2015-08-14 07:58","context":"XXX"},{"time":"2015-08-14 12:35","context":"XXX"}],"html":"","mailNo":"560139927847","expTextName":"圆通快递","expSpellName":"yuantong","update":"1440679197","cache":"0","ord":"ASC","tel":"95554"}
 

可以发现首先是大括号，然后中间data部分又有一个中括号，然后又是像数组一样的数据。这样的数据，怎样取？

$('#number').html("订单编号："+msg.mailNo); //取得订单编号，其他数据取值方法类似

var data = msg.data; //定义data

if(msg.data != null && msg.data.length>0){ //循环取值

for(var i=0; i<msg.data.length; i++){

var time = msg.data[i].time; //记录时间

var context = msg.data[i].context;  //记录号码

alert(time);

alert(context);

}

}

如此便能对json数据进行取值操作了。

 

当然重点仍不是ajax，我们继续讲讲参数传递。

JQuery提供的

window.localStorage.setItem(key,value);
和

window.localStorage.getItem(key);
可以直接在内存中保存这个数据，方便传参，其实很多时候用户名和密码不正是通过这种办法记录的么？

如果单单只是为了传参，在使用过后，别忘了擦除一下这个记录哦！

window.localStorage.clear(key);
Key为空则全部清除，key的值应该写入你想要清除的记录的变量名。

 

你问有没有更好的方法来传递参数，如果能够直接把参数写在get传参形式下的url地址里面，是不是又让内存少干点活呢？（下面这种方法仅限get传参，post传参是密文，不适用）

<a href=“write.blog.csdn.net?id=123”></a>
如果一个a标签传入了一个id，点击这个链接后在地址栏会找到这个id，我想把它利用起来。

$.getUrlParam = function (name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

var r = window.location.search.substr(1).match(reg);

if (r != null) return unescape(r[2]); return null;

}

var id= $.getUrlParam(id);

在JS中直接使用以上代码，便可直接取到传入参数，即id。这种方法小编目前只用来它来做页面跳转传参，很多时候并不需要这样用。用得更多的方法是window.localStorage，因为它是全局使用的，如果一个函数你需要在两个平行的函数之间传递参数的话，貌似这种场合特别好用。

同时还有一些小方法。

<div id="idstr" onClick="ClickStr(this.id)">点击这里执行函数</div>

<a href="javascript:ClickStr(this.id);">点击这里执行函数</a>

接受参数：

function ClickStr(id){}