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

<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. Linux学习和ROS安装(1)

    参考文档:https://www.cnblogs.com/liu-fa/p/5779206.html#undefined 系统环境:Window7 64bit+VMware11 ubuntu-gnom ...

  2. drf解析器

    1.简介 作用:将传过来的数据,解析成字典 2.使用 分为局部使用和全局使用 局部使用,什么都不写,默认就是 parser_classes = [JSONParser,FormParser] from ...

  3. Github安全开源工具集合

    Scanners-Box是来自github平台的开源扫描仪的集合,包括子域枚举,数据库漏洞扫描程序,弱密码或信息泄漏扫描仪,端口扫描仪,指纹扫描仪和其他大型扫描仪,模块化扫描仪等.对于其他众所周知的扫 ...

  4. 《全栈性能Jmeter》-2性能测试初体验

  5. [Java in NetBeans] Lesson 01. Java Programming Basics

    这个课程的参考视频在youtube. 主要学到的知识点有: Create new project, choose Java Application. one .jar file/ package(.j ...

  6. numpy.loadtxt用法

    numpy.loadtxt(fname, dtype=, comments='#', delimiter=None, converters=None, skiprows=0, usecols=None ...

  7. WebAssembly 浏览器中运行c/c++模块

    今天,要给前端造点儿福利 浏览器中能调用javascript,曾经我们以为够用了,够强大了,但是事实上是完全不够 还好,mozilla的工程师提出了webassembly,目前是利用emsctript ...

  8. android hook native函数

    大概2年前写的代码,今天突然要用到,找了半天,这里记录下 用到的库: https://pan.baidu.com/s/1htuUQX2 #include <jni.h> #include ...

  9. Selenium基本使用(十二)测试报告生成

    报告目录结构 Reporter根目录 | |-------------LOGS |                                                | |         ...

  10. unity3d-游戏实战突出重围,第一天

           此游戏是根据书上一步一步敲的.是一个入门级别的游戏.         游戏状态机 说到游戏状态机,就不得不提到开发中最常用的MVC模式. MVC模式的全称是Model-View-Cont ...