Résumé des méthodes de passage des paramètres en js (avec code)

Ce que cet article vous apporte est un résumé des méthodes de transmission des paramètres en js (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Créer implicitement des balises html

<input type="hidden" name="tc_id" value="{{tc_id}}">

Cette méthode est généralement utilisée avec ajax La valeur ci-dessus utilise le moteur de modèle

2.window['data']

window['name'] = "the window object";

3. Utilisez localStorage, les cookies, etc. pour stocker

window.localStorage.setItem("name", "xiaoyueyue");
window.localStorage.getItem("name")

Fonctionnalités

1、localStorage 是持久存储，不主动删除 一直存在  
         sessionStorage 是临时存储,关闭浏览器数据就没了
2、localStorage 可以多窗口共享
       sessionStorage 不能多窗口共享数据

4. Obtenez la méthode de la barre d'adresse

1. Votre propre méthode encapsulée

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;

}

2. Méthode d'expression régulière

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;
}

5. >

<!--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>

Cette extension

Utilise ceci pour transmettre des paramètres. Je l'ai compris en utilisant art-template. Il n'est plus nécessaire de transmettre un seul identifiant et de le diviser en plusieurs paramètres ! heureux!

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 + ' !')

}

event

Puisque cela peut être utilisé, la méthode

dans l'événement est également possible : event.target

Obtenir la valeur actuelle de l'index en fonction de la classe, et les paramètres peuvent être un objet d'événement

  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;
  },

6.Données HTML5-* Attributs personnalisés

<button data-name="xiaoyueyue">点击</button>

 var btn = document.querySelector("button")
    btn.onclick = function () {
      alert(this.dataset.name)
    }

7. Passage de paramètre de chaîne

Paramètre unique

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)
}

Passage multi-paramètres

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

var params = """ + name + "","" + age + "","" + home + "","" + friend + """;
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 + "岁了！")
}

Passage de paramètres complexes

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 + "是我的好朋友")
}

8.arguments

les objets sont en tous ( (non-flèche) les fonctions, les variables locales sont disponibles. Vous pouvez utiliser l'objet arguments pour référencer les arguments d'une fonction dans une fonction. C'est un objet de type tableau. arguments

<button onclick="fenpei(&#39;f233c7a290ae11e8a0f00050568b2fdd&#39;,&#39;100&#39;,&#39;0号 车用柴油(Ⅴ)&#39;)">分配</button>

function fenpei() {
    var args = Array.prototype.slice.call(arguments);
    alert("我是" + args[2] + "油品，数量为 " + args[1] + " 吨， id为 " + args[0])

}

Recommandations associées :

Méthode de transmission des paramètres de fonction anonyme js

js transmettant les paramètres à php Il y a des caractères tronqués

Comment utiliser js pour transmettre des paramètres au fichier php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!