前端页面之间传递参数

跨页面传递参数

这里有假如传递一个参数，在另一个页面接收时，只需要js中写入如下代码：
localhost:8080/index.jsp?id=1

  function showWindowHref() {
        var sHref = window.location.href;
        var args = sHref.split('?');
        if(args[0]==sHref){
            return"";
        }
        var arr = args[1].split('=');
        console.log(arr[1]);

这里我打印了一下传递的参数。

如果有多个参数，我们只需要先以&截取字符串，然后在以=截取。就能得到里面的参数了。

function showWindowHref(){
	var sHref = window.location.href;//获取url
	var args = sHref.split('?');//以？截取字符串
	if(args[0]==sHref){//截取的前面的字符串和sHref相同，也就是没有参数
	return "";
	}
	var arr = args[1].split('&');//以&符号截取
	var obj={};//定义个对象
	for(var i = 0;i< arr.length;i++){
		var arg = arr[i].split('=');
		obj[arg[0]] = arg[1];//=前面的是属性，也就是arg[0],=后面你的是值，一起放对象里
	}
	return obj;
}
var herf = showWindowHref();//执行函数
console.log(href['参数名']);//这里也可以使用obj.属性名

使用jquary的append，放原生html的连接字符串问题

 $(function () {
        $.post("../showArticle.do",function (data) {
            for(var i in data){
                //console.log(data[i]);
                var mode = data[i];
                console.log(mode.id);
                var tr = $("#tbody").append("<tr><tr>");
                tr.append(" <td><input type='checkbox' class='input-control' name='checkbox[]' value='' /></td>");
                tr.append("<td class='article-title'>"+mode.title+"</td>");
                tr.append("<td>"+mode.content+"</td>");
                tr.append("<td class='hidden-sm'>"+mode.label+"</td>");
                tr.append("<td class='hidden-sm'>"+i+"</td>");
                tr.append("<td>2015-12-03</td>");
                tr.append('<td>'+
                    '<a href="update-article.html?id='+mode.id+' ">修改</a>'+
                    '<a rel=\"6\">审核通过</a>'+
                    '<a rel=\"7\">审核不通过</a>'+
                    '</td>');
            }
        },"json");
    });

或者这样连接

function(){
      var path = "/" + location.pathname.split("/")[1];//获取项目名
      $.get(path+"/question/findList",{"currentPage":1,"pageSize":5},
              function(data){
                console.log(data);
                //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
                $.each(data,function(i,obj){
                  var message = "";
                  if(obj.auditStatus == 0){
                    message = "待审核";
                  }else if(obj.auditStatus == 1){
                    message = "审核通过";
                  }else{
                    message = "审核失败";
                  }
                  $("#tbody").append(
                          '<tr>' +
                          '<td><input type="checkbox" class="input-control" name="checkbox[]" value="'+obj.id+'" /></td> ' +
                          '<td class="article-title">'+obj.title+'</td> ' +
                          '<td>'+obj.category.name+'</td> ' +
                          '<td class="hidden-sm">'+obj.message+'</td> ' +
                          '<td class="hidden-sm">'+obj.replySet.length+'</td> ' +
                          '<td>'+message+'</td> ' +
                          '<td>' +
                          /*'<a href='+path+'/question/findQuestion?id='+obj.id+'>查看详情</a> ' +*/
                          '<a href=update-article.html?id='+obj.id+'>查看详情</a> ' +
                          '<a rel="6">删除</a></td> ' +
                          '</tr>');
                });

              },"json");
    });

接收的信息，获得参数

function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        console.log(r);//？后面的一串
        if(r!=null)
            return  unescape(r[2]);
        return null;
    }

    $(function(){
        var id = GetQueryString("id");//通过名字获取值
        console.log(id);
        console.log(location.pathname);//url
        var path = "/" + location.pathname.split("/")[1];//         /加上项目名
        $.get(path+"#",{"id":id},function(data){
            console.log(data);
            $("#article-title").val(data.title);
            $("textArea[name=describe]").html(data.message);
        },"json");
    });

总结

通过获取url的字符串，然后截取字符串，获取参数值。js里面没有map，对象就跟map差不多，里面也是key，value形式的，就是一个属性，一个值。需要存取多个参数值，为了提取方面，一般我们使用对象存取。