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

<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. vue中让input框自动聚焦

    created(){ this.changfouce(); }, methods: { //在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中, ...

  2. Openresty 安装第三方插件

    Openresty 安装第三方插件 程序媛没有夜生活 2016.08.02 15:33* 字数 167 阅读 1283评论 0喜欢 2 在安装之前,我们先来看一下我们现有的模块. 1.将需要安装的插件 ...

  3. express使用

    1.安装express命令 cnpm install express --save 2.使用方法 var express = require('express'); var app = express ...

  4. 【LeetCode每天一题】Swap Nodes in Pairs

    Given a linked list, swap every two adjacent nodes and return its head. You may not modify the value ...

  5. 2019.03.18 连接my sql

    11.登陆功能(链接MySQL) python manage.py starapp movie 新建一个应用模块之后要记得到setting添加这个应用模块 在python2中你还有去导入一个MySQL ...

  6. [LeetCode] 504. Base 7_Easy tag: Math

    Given an integer, return its base 7 string representation. Example 1: Input: 100 Output: "202&q ...

  7. System.Web.UI.Page的页面基类

    服务器端的page类 所有我们编写的页面都继承自page类,可见page类是非常重要的,page类提供了哪些功能,直接决定了我们的页面类可以继承什么功能,或者说,直接决定了我们的页面类功能的强大与否! ...

  8. vim 常用

    Format JSON :%!python -m json.tool 1. define custom function and use it define function in .vimrc fu ...

  9. Express web框架 upload file

    哈哈,敢开源,还是要有两把刷子的啊 今天,看看node.js 的web框架 Express的实际应用 //demo1 upload file <html><head><t ...

  10. 无法序列化会话状态。在“StateServer”或“SQLServer”模式下,ASP.NET 将序列化会话状态对象,因此不允许使用无法序列化的对象或 MarshalByRef 对象。如果自定义会话状态存储在“Custom”模式下执行了类似的序列化,则适用同样的限制。

    将项目部署到服务器后发现有如下问题,查了网上好多说是需要被序列化的类没有写上[Serializable]标志,所以把全部需要序列化的列都写上了标志发现还是不是,最后查到了发现网上说的并不太准确,而是需 ...