JS_前端传参方式1

JS前端传参方式

---

前端传参方式1

---

使用html标签自带的功能完成传参

• 超链接标签完成传参

      在超链接 href 属性中定义携带参数数据
      在href中，先定义 url 地址，并使用 问号 与携带参数的数据间隔开
      携带的参数数据必须是 键值对 语法形式，也就是 键名=键值
      多个 键值对使用 & 符号 间隔
      超链接只能使用 get方式 传参

• form标签完成传参

      1、form标签的属性
               action        设定跳转的url地址
               method      携带参数的方式 (get和post)
                      get      显性传参 明文传参
                                  get 方式传参，参数数据会显示在浏览器地址栏中，是默认传参方式
                      post      隐性传参 密文传参
                                   post 方式传参，参数数据不会显示在浏览器地址栏中
              enctype        文件上传 必须设定的 属性
      2、 input等标签的设定
               input 等标签必须要设定name属性，form标签才能完成传参
                一些 input 标签必须要设定 value 属性

---

案例

需求说明

    需求：将浏览器地址栏中携带的参数数据存储为对象

    假设我们传递的参数为 ?name=张三&age=18&sex=男

    那么我们从浏览器中去获取的参数数据就会是
        ?name=%E5%BC%A0%E4%B8%89&age=18&sex=%E7%94%B7

    最后我们需要的是以对象形式存储的数据 {name:'张三' , age:18 , sex:'男'}

知识点

      1、window.location.search   获取浏览器地址栏中携带的参数数据。
               获取的参数是从 ? 这个分隔符开始的。
      2、window.decodeURIComponent()   将 %十六进制数值 形式还原为对应的中文
              浏览器因为执行机制问题，地址栏中的中文、特殊符号，都会转化为 %两位十六进制数值 形式。例如：%E5%BC%A0%E4%B8%89 ；所以，要进行转换，把他转换为对应的中文。
      3、substr 截取字符串
              只写一个参数，表示从这个参数表示的索引下标开始，截取至最后一个字符。
              可以帮我们实现：截取问号之后，我们所需要的参数。

---

代码

1、JS代码

	// 创建一个对象 存储数据结果
	var obj = {} ;

	// 获取浏览器地址栏数据信息，不要第一个?问号
	// 使用substr截取字符串，从问号后第一个字符开始，截取到最后一个字符
	var str = window.location.search.substr( 1 );
    
	// 将字符串按照 & 符号为间隔，转化为数组
    var arr1 = str.split('&');
   
	// 循环遍历数组arr1，以 等号 为间隔，将 键值对 分割为数组
     arr1.forEach( function(item){
   	 	// item 是键值对字符串(name=张三  age=18)
     	// arr2[0] 存储键值对的键名，也就是对象需要设定的键名
     	// arr2[1] 存储键值对的键值，也就是对象需要设定的键值
     	var arr2 = item.split('=');
         
        //将 %十六进制数值 还原为对应的中文，并给对象新增单元
 		obj[ arr2[0] ] = window.decodeURIComponent( arr2[1] ) ;
	})

2、函数封装

/*
    获取浏览器地址栏参数数据

        @return object 返回值是 参数键值对对象

*/

function myGetUrlVal() {
    // 创建空对象 准备存储数据结果
    var obj = {};

    // 获取浏览器地址栏参数数据 不要第一个字符?问号
    var str = window.location.search.substr(1);

    // 以 & 符号为间隔，将字符串分割为数组
    var arr1 = str.split('&');

    // 循环遍历数组，将数据单元也就是键值字符串，以 = 为间隔分割为数组
    arr1.forEach(function (item) {
        // item 就是键值对字符串
        var arr2 = item.split('=');

        // 将 arr2[0]作为键名，arr2[1]作为键值赋值给对象
        // 使用 window.decodeURIComponent() 还原 %十六进制数值 为中文/特殊符号
        obj[arr2[0]] = window.decodeURIComponent(arr2[1]);
    })

    // 返回值 就是这个对象
    return obj;
}

---

前端传参方式2

---

JavaScript 的 ajax 方式传参

该方法后续会更新

大家关注一下不迷路，求关注支持！！！