开发背景:一个页面有一个下拉框和一个单选按钮,下拉框保存的是厂商信息,单选按钮保存的是产品信息。每次下拉框的内容被选中,把厂商编码保存到隐藏域

<input type="hidden" id="basin_code" name="basin_code" value=""/>

然后点击该河流下的产品,把产品编码保存到隐藏域

<input type="hidden" id="code_pollute" name="code_pollute" value=""/>

然后ajax提交到后台根据这两个参数查询数据。

下拉框代码

<ul>
     <li><a id="dynastytitle" onclick="hiddenValue('pg');" class="dropdown">苹果</a></li>
            <li class="sublinks">
                <a onclick="hiddenValue('hw');">华为</a>
                <a onclick="hiddenValue('xm');">小米</a>
                <a onclick="hiddenValue('sx');">三星</a>
        </li>
 </ul>

单选按钮代码

<ul id="navigation_ul">
      <li><a onclick="hiddenValue('N01');">电脑</a></li>
      <li><a onclick="hiddenValue('P02');">手机</a></li>
      <li id="stander" class="active"><a onclick="hiddenValue('C03');">平板</a></li>
 </ul>

每次点击传一个参数到hiddenValue()函数,hiddenValue把编码保存到隐藏域

function hiddenValue(param){
        if(param==undefined||param=='udefined'){
            //alert(1);
            $("#code_pollute").val('C03');
            $("#basin_code").val('pg');
        }
        if(param=='N01'||param=='P02'||param=='C03'){
            //alert(2);
            $("#code_pollute").val(param);
        }
        if(param=='pg'||param=='hw'||param=='xm'||param=='sx'){
            //alert(3);
            $("#basin_code").val(param);
            $("#code_pollute").val("C03");
        }
        debugger;
        changebasin();   --隐藏域值改变调用ajax方法请求后台
    }

ajax每次请求后台会先从隐藏域取厂商和产品的参数值传到后台

function changebasin(){

var rivername = $("#basin_code").val();
        var codepollute = $("#code_pollute").val();
        //alert(rivername);
        $.ajax({
            type: "POST",
            url:  "../factory/factory_product.vm",
            dataType: "json",
            data:JSON.stringify({"watername":rivername,"code_pollute":codepollute}),
            contentType: "application/json; charset=utf-8",
            success: function(result){
                 loadEcharts(result);
                 $("#monitortime").html(result.monitortime);
           }
        });
    }

每次隐藏域的值改变后会调用请求后台的函数changebasin()

$(function(){
        changebasin();
        hiddenValue();
    })

每次页面初始化会先调用两个函数,给隐藏域赋值,调用后台方法

隐藏域传值到后台controller的更多相关文章

  1. 避免url传值字符串sjstr过长,使用from表单【隐藏域】post提交

    1.普通的url传值<html--------------- <!-- 隐藏域post提交url --> <form id="urlPost" action ...

  2. 错误记录:html隐藏域的值存字符串时出错

    问题 webform在后台给前台传值.  <input type="hidden" value="<%=userType %>" id=&qu ...

  3. 获取jsp选中复选框的id传到后台controller,进行逻辑删除等操作

    逻辑删除设备:(数据表中还有这条记录,不显示出来) 思路: 数据表加个字段display,值为Y/N,只显示display为Y的,删除时,把display的值改为N,就不会显示出来 jsp页面如下图, ...

  4. 关于java 获取 html select标签 下拉框 option 文本内容 隐藏域

    在HTML中从多选下拉框中提取已选中选项的文本内容到后台,被这个问题难倒了. demo.jsp文件 <select id="selecttype" name"typ ...

  5. SpringMVC中,前台jsp封装参数,绑定参数,传递参数到后台controller的过程详解

    前台到后台的流程:前台jsp->后台:controller控制器层->service业务层->DAO数据访问层->数据库model模型层. 从上面流程可知,前台jsp的数据,想 ...

  6. jquery.validate 使用--验证表单隐藏域

    jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为 ...

  7. jsp通过s:hidden传值给后台,后台数据出现了若干逗号问题

    <s:iterator value="rpActionVO.page.result" id="list" status="st"> ...

  8. html中隐藏域hidden的作用介绍及使用示例

    基本语法: <input type="hidden" name="field_name" value="value"> 作用:  ...

  9. bootstrapValidator对于隐藏域验证和程序赋值即时验证的问题

    问题1: 如下代码: <input type="hidden" name="productId"/> $("#addForm") ...

随机推荐

  1. C 函数声明及求最大值

    #include <stdio.h> int main() { int a,b,c,max(int x,int y,int z); scanf("%d,%d,%d",& ...

  2. 339A

    #include <iostream> #include <string> #include <algorithm> using namespace std; #d ...

  3. 以太坊nonce

    以太坊系列(ETH&ETC)在发送交易有三个对应的RPC接口,分别是ethsendTransaction.ethsendRawTransaction和personal_sendTransact ...

  4. Tf中的NCE-loss实现学习【转载】

    转自:http://www.jianshu.com/p/fab82fa53e16 1.tf中的nce_loss的API def nce_loss(weights, biases, inputs, la ...

  5. node服务开发环境判断和启动端口指定---process.env.NODE_ENV

    在node启动的时候我们需要在代码里面判断服务器运行环境 可以根据process.env.NODE_ENV来判断 一.开发环境的判断 1.安装 npm i -g cross-env 2.启动 cros ...

  6. Centos6.5建立本地YUM源

    很多情况下公司的服务器是不允许连外网的,那么安装软件的时候就很不方便了,这里就需要建立一个本地YUM源了. 文件位置:/etc/yum.repos.d/    后缀一定是.repo结束. 下面我们搭建 ...

  7. kdeplot(核密度估计图) & distplot

    Seaborn是基于matplotlib的Python可视化库. 它提供了一个高级界面来绘制有吸引力的统计图形.Seaborn其实是在matplotlib的基础上进行了更高级的API封装,从而使得作图 ...

  8. C# 抽象类、抽象属性、抽象方法

    抽象类往往用来表征对问题领域进行分析.设计中得出的抽象概念,是对一系列看上去不同,但是本质上相同的具体概念的抽象. 下面我们以水果为例,首先定义抽象类Fruit,抽象类中有公共属性vendor,抽象属 ...

  9. 7.C# 多态的实现

    C# 多态的实现 封装.继承.多态,面向对象的三大特性,前两项理解相对容易,但要理解多态,特别是深入的了解,对于初学者而言可能就会有一定困难了.我一直认为学习OO的最好方法就是结合实践,封装.继承在实 ...

  10. 制作正式版10.11 OS X El Capitan 安装U盘(优盘)

    一.准备工作:1.准备一个 8GB 或以上容量的 U 盘,确保里面的数据已经妥善备份好(该过程会抹掉 U 盘全部数据)2.从官网Appstore下载下来的 “安装 OS X El Capitan”,当 ...