众所周知,当我们使用jq时,前台与后台常用的参数传递,最常用的异步提交为ajax。这次介绍的主题就是在jq环境下 传递参数的问题。
1.基础形式异步交互数据:
var options={
type:"post",
url:"",
dataType:"json",
data:{"data1":data1,"data2":data2,.......},
success:function(data){
//对传递过来的data进行操作
}
}
$.ajax(options)
这个是最基础的版本。接下来介绍利用ajax传递数组。
2.ajax异步传递数组。
var options={
type:"post",
url:"",
traditional: true,
dataType:"json",
data:{"data1":data1,"data2":data2,.......},
success:function(data){
//对传递过来的data进行操作
}
}
$.ajax(options)
如上加入traditional: true,属性即可。这样就可以传递数组了。当然你也可以通过拼接字符串进行传递。
3.使用post,get,getJSON方法异步请求。
$.post({"www.baidu.com",{"data1":data1,"data2":data2",.....},
function(data){//处理参数}});
$.get({"www.baidu.com",{"data1":data1,"data2":data2",.....},
function(data){//处理参数}})
$.getJSON({"www.baidu.com",{"data1":data1,"data2":data2",.....},
function(data){//处理参数}})
4.使用ajaxsubmit提交form表单
var options={
url:"",
type:"",
data:{"data1":data1,"data2":data2,.....},
seccess:function(data){
//处理参数
}
}
$("#form").ajaxSubmit(options)
该方法主要用来处理带有表单数据的提交。
5.post虚拟表单进行提交
//创建虚拟表单
function virtualPost(URL, PARAMS) {
var temp = document.createElement("form");
temp.action = URL;
temp.method = "post";
temp.style.display = "none";
for (var x in PARAMS) {
var opt = document.createElement("textarea");
opt.name = x;
opt.value = PARAMS[x];
// alert(opt.name)
temp.appendChild(opt);
}
document.body.appendChild(temp);
temp.submit();
return temp;
}
//调用
virtualPost("www.baidu.com",{"data1":data1,"data2":data2,....})
该方法用于向后台提交参数,进行处理,或者请求转发。
6.使用地址栏拼接参数提交
//上一个页面提交
location.href=url+"?params1="+params1+"¶ms2="+params2
//下一个页面取值
function GetQueryString(name) {
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
GetQueryString("targetId")//使用
上述方法既可实现跳转。也可以实现后台请求转发。
上述6种1-4用于异步提交,5-6用于同步提交