Home > Web Front-end > JS Tutorial > Summary of methods for passing parameters in js (with code)

Summary of methods for passing parameters in js (with code)

不言
Release: 2018-08-14 15:55:45
Original
3562 people have browsed it

This article brings you a summary of the methods of passing parameters in js (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Implicitly create html tags

<input type="hidden" name="tc_id" value="{{tc_id}}">
Copy after login
This method is generally used with ajax. The above value uses the template engine

2.window['data']

window['name'] = "the window object";
Copy after login

3. Use localStorage, cookies, etc. to store

window.localStorage.setItem("name", "xiaoyueyue");
window.localStorage.getItem("name")
Copy after login
Features
1、localStorage 是持久存储,不主动删除 一直存在  
         sessionStorage 是临时存储,关闭浏览器数据就没了
2、localStorage 可以多窗口共享
       sessionStorage 不能多窗口共享数据
Copy after login

4. Get the address bar method

  1. My own encapsulated method

function parseParam(url) {
  var paramArr = decodeURI(url).split("?")[1].split("&"),
    obj = {};
  for (var i = 0; i < paramArr.length; i++) {
    var item = paramArr[i];
    if (item.indexOf("=") != -1) {
      var tmp = item.split("=");
      obj[tmp[0]] = tmp[1];
    } else {
      obj[item] = true;
    }
  }
  return obj;

}
Copy after login

2. Regular expression method

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;
}
Copy after login

5. Label binding function parameter passing

<!--base-->
 <button id="test1" onclick="alert(id)">test1</button>
 
<!--高级-->
<button id="test" name="123" yue="xiaoyueyue" friend="heizi" onclick="console.log(this.getAttribute(&#39;yue&#39;),this.getAttribute(&#39;friend&#39;))">test</button>
Copy after login

this extension

Use This parameter passing was figured out while using art-template. It is no longer necessary to pass only one ID and splice it into several parameters! happy!

var box = document.createElement("p");
box.innerHTML = "<button id=&#39;1&#39; data-name=&#39;xiaoyueyue&#39; data-age=&#39;25&#39; data-friend=&#39;heizi&#39; onclick=&#39;alertInfo(this)&#39;>点击</button>";
document.body.appendChild(box);


// name,age,friend
function alertInfo(val) {
  console.log(val);
  alert('大家好,我是' + val.dataset.name + ', 我今年' + val.dataset.age + '岁了,我的好朋友是' + val.dataset.friend + ' !')

}
Copy after login

event

Since this can be used, the event.target method is also available in the event:

Get the current index value according to class , the parameters can be event objects
  var getIndexByClass =  function (param) {
    var element = param.classname ? param : param.target;
    var className = element.classname;
    var domArr = Array.prototype.slice.call(document.querySelectorAll('.' + className));
    for (var index = 0; index < domArr.length; index++) {
      if (domArr[index] === element) {
        return index;
      }
    }
    return -1;
  },
Copy after login

6.HTML5 data-* Custom attributes

<button data-name="xiaoyueyue">点击</button>
Copy after login
 var btn = document.querySelector("button")
    btn.onclick = function () {
      alert(this.dataset.name)
    }
Copy after login

7. String parameters

Single parameter

var name = 'xiaoyueyue',
  age = 25;

var box = document.createElement("p");
box.innerHTML = '<button onclick="alertInfo(\&#39;&#39; + name + &#39;\&#39;)">点击</button>';
console.log(box)
document.body.appendChild(box);


// name, age
function alertInfo(name, age, home, friend) {
  alert("我是" + name)
}
Copy after login

Multi-parameter passing

 var name = 'xiaoyueyue',
  age = '25',
  home = 'shanxi',
  friend = 'heizi';

var params = "&quot;" + name + "&quot;,&quot;" + age + "&quot;,&quot;" + home + "&quot;,&quot;" + friend + "&quot;";
var box = document.createElement("p");
box.innerHTML = "<button onclick=&#39;alertInfo(" + params + ")&#39;>点击</button>";
console.log(box)
document.body.appendChild(box);


// name, age,home,friend
function alertInfo(name, age, home, friend) {
  alert("我是" + name + ',' + "我今年" + age + "岁了!")
}
Copy after login

Complex parameter passing

var data = [
  {
    "name": "xiaoyueyue",
    "age": "25",
    "home": "shanxi",
    "friend": "heizi"
  }

]

var box = document.createElement("p");

for (var i = 0; i < data.length; i++) {
  box.innerHTML = "<button id=&#39;btn&#39;  onclick=&#39;alertInfo(id,\"" + data[i].name + "\",\"" + data[i].age + "\",\"" + data[i].home + "\",\"" + data[i].friend + "\")&#39;>点击</button>";
}

document.body.appendChild(box);

function alertInfo(id, name, age, home, friend) {
  alert("我是" + name + "," + friend + "是我的好朋友")
}
Copy after login

8.arguments

argumentsObjects are local variables available in all (non-arrow) functions . You can use the arguments object to reference a function's arguments within a function. It is an array-like object.

<button onclick="fenpei(&#39;f233c7a290ae11e8a0f00050568b2fdd&#39;,&#39;100&#39;,&#39;0号 车用柴油(Ⅴ)&#39;)">分配</button>
Copy after login
function fenpei() {
    var args = Array.prototype.slice.call(arguments);
    alert("我是" + args[2] + "油品,数量为 " + args[1] + " 吨, id为 " + args[0])

}
Copy after login

Related recommendations:

js anonymous function parameter passing method

JS parameters passed to php are garbled

How to use js to pass parameters to php files

The above is the detailed content of Summary of methods for passing parameters in js (with code). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template