JavaScript前后端传参_CodingPark编程公园

前后端传参

  1. 工程逻辑
  2. 代码展示
  3. 传参的小技巧汇总

在这里插入图片描述

工程逻辑

在这里插入图片描述

代码展示

yq.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>快速展示【js】发射信息给后端</title>
    <link rel="stylesheet" href="../static/css/yq.css">
  </head>
   <body>  




    <p id="title1"> 用户群体识别结果 </p>
    <div class="search d3" >
        <form>
              <input type="text" id="searchPhone" placeholder="请在此输入用户手机号">
              <button type="button" id="searchPhoneId"></button>
        </form>
    </div>



      
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="yq.js"></script>
    <script src="oxy.js"></script>

  </body>
</html>

yq.css

#title1{
  position: absolute;
  margin-top: 15px;
  margin-left: 800px;
  z-indent:2;
	color: grey;
	font-size: 35px;
	font-family: Hannotate SC;
}

div.search {padding: 30px 0}
form {
  position: absolute;
  width: 400px; 
  margin-left: 740px;
  margin-top: 100px;
}


.d3 form {
  background: #A3D0C3;
}
.d3 input, .d3 button {
  border: none;
  outline: none;
  background: transparent;
}
.d3 input {
  width: 100%;
  height: 42px;
  padding-left: 15px;
}
.d3 button {
  height: 42px;
  width: 42px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
.d3 button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #F9F0DA;
}


yq.js


//ajax  获取后端参数    我写在了整个JS最后

  $("#searchPhoneId").on('click',  function(event) {
    /* Act on the event */
    var data = {phone_num:$("#searchPhone").val()}
    console.log(data);
    $.ajax({
      url:"http://192.168.1.114:8081/get_user_info/",
      type:"POST",
      time:'3000',  
      dataType: "json",
      data: data,
      success:function(rsp){  
        console.log(rsp);    
        if(rsp.status == 1){
          // 获取各种 groupID 
          familyGroupId = rsp.id_info[0].family_group_id  //rsp.id_info.family_group_id
          console.log(familyGroupId); //看看是否可以获取到 这个familyGroupId;
          workGroupId = rsp.id_info[1].work_group_id
          friendGroupId = rsp.id_info[2].friends_group_id

          var str = ""
          var j = 1
          for(var one in rsp.data){                         //遍历一下
            str = str + "<tr><td>" + j + "</td>" + "<td>" 
                + rsp.data[one].phone_num +"</td>"+ "<td>" + rsp.data[one].city +"</td></tr>" //选择要哪个
                j = j + 1;
          }
          document.getElementById('table_pai').innerHTML = ""
          var table = $('#table_pai').append(str)
        }
      },
      error:function(e) {
        /* Act on the event */
        console.log(e);
      }
    });
});


oxy.js

$("#searchPhoneId").on('click',  function(event) {
  /* Act on the event */
  var data = {phone_num:$("#searchPhone").val()}
  console.log(data);
  $.ajax({
    url:"http://192.168.1.114:8081/get_user_info/",
    type:"POST",
    time:'3000',  
    dataType: "json",
    data: data,
    success:function(rsp){  
      console.log(rsp);    
      if(rsp.status == 1){
        // 获取各种 groupID 
        
        
        //家庭群词云
        familyGroupId = rsp.id_info[0].family_group_id  //rsp.id_info.family_group_id
        window.localStorage.setItem("familyGroupId",familyGroupId);//设置指定key的数据(JSON格式)
        
        //敏感度
        is_sensitive = rsp.id_info[0].is_sensitive_num  //rsp.id_info.family_group_id
        window.localStorage.setItem("is_sensitive",is_sensitive);//设置指定key的数据(JSON格式)
        is_not_sensitive = rsp.id_info[0].is_not_sensitive_num  //rsp.id_info.family_group_id
        window.localStorage.setItem("is_not_sensitive",is_not_sensitive);//设置指定key的数据(JSON格式)
        
        //地域 <*V2.0*>
        var dy = rsp.city_info    //尝试传数组
        console.log(dy);             /*这里是可以的*/
        window.localStorage.setItem("dy",JSON.stringify(dy));//(JSON格式) 传Json
          
          
        //职业
        var zy = rsp.user_label_info    //尝试传数组           
        window.localStorage.setItem("zy",JSON.stringify(zy));//(JSON格式) 传Json
        
        
        // <*V1.0*>
        // bj = rsp.city_info[0].北京  //rsp.id_info.family_group_id
        // window.localStorage.setItem("bj",bj);//设置指定key的数据(JSON格式)
        // sh = rsp.city_info[0].上海  //rsp.id_info.family_group_id
        // window.localStorage.setItem("sh",sh);//设置指定key的数据(JSON格式)
        // gz = rsp.city_info[0].广州  //rsp.id_info.family_group_id
        // window.localStorage.setItem("gz",gz);//设置指定key的数据(JSON格式)
        // sz = rsp.city_info[0].深圳  //rsp.id_info.family_group_id
        // window.localStorage.setItem("sz",sz);//设置指定key的数据(JSON格式)
        // 
        
        
        
        //familyGroupId = 3135  //rsp.id_info.family_group_id
        //console.log(familyGroupId); //看看是否可以获取到 这个familyGroupId;
        // workGroupId = rsp.id_info[1].work_group_id
        // window.localStorage.setItem("workGroupId","workGroupId");//设置指定key的数据(JSON格式)
        // console.log(workGroupId); //看看是否可以获取到 这个familyGroupId;
        // friendGroupId = rsp.id_info[2].friends_group_id 
        // window.localStorage.setItem("friendsGroupId","friendsGroupId");//设置指定key的数据(JSON格式)
        // console.log(friendsGroupId); //看看是否可以获取到 这个familyGroupId;     
      }
    },
  });
});


yq2.js

var myChart2 = echarts.init(document.getElementById('main_yq2'));

var is_sensitive = window.localStorage.getItem("is_sensitive");//接收
console.log(is_sensitive);
var is_not_sensitive = window.localStorage.getItem("is_not_sensitive");//接收
console.log(is_not_sensitive);



option = {
    title : {
        text: '敏感用户分布',
        subtext: '----测试中----',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['敏感用户','非敏感用户']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
                {value:is_sensitive, name:'敏感用户'},
                {value:is_not_sensitive, name:'非敏感用户'},
                
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
myChart2.setOption(option);

window.localStorage.removeItem("is_sensitive");//删除指定key的数据
window.localStorage.removeItem("is_not_sensitive");//删除指定key的数据

// window.localStorage.clear();//清空所有的存储数据



结果展示
在这里插入图片描述

传参的小技巧汇总

[1] – 拼个字符串给html
在这里插入图片描述
[替换html显示的原有内容]
在这里插入图片描述

[2] – push方法

var JsonList = [ ] //数组
var word_name = { } //对象

在这里插入图片描述

[3] – push方法

感觉 最后都Push进 数组 [ ]

在这里插入图片描述

[4]

在这里插入图片描述
在这里插入图片描述

[氧舱-出数据中心]

在这里插入图片描述

[把我整惨了的一个tooltip]

在这里插入图片描述
在这里插入图片描述

前后端–跨文件 localStorage

【1】
在这里插入图片描述

【2】
在这里插入图片描述

在这里插入图片描述

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 鲸 设计师:meimeiellie 返回首页
实付 79.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值