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

<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. 【EatBook】-NO.1.EatBook.1.JavaData.1.001-《JSON 必知必会-Introduction to JavaScript Object Notation》-

    1.0.0 Summary Tittle:[EatBook]-NO.1.EatBook.1.JavaData.1.001-<JSON 必知必会-Introduction to JavaScrip ...

  2. git-代码同步至github

    代码同步到github上 Last login: Wed Mar 27 13:53:06 on ttys001localhost:~ ligaijiang$ gitusage: git [--vers ...

  3. 利用TensorFlow实现多元逻辑回归

    利用TensorFlow实现多元逻辑回归,代码如下: import tensorflow as tf import numpy as np from sklearn.linear_model impo ...

  4. linux申请strace ,lstrace, ptrace, dtrace

    ltrace命令是用来跟踪进程调用库函数的情况. ltrace -hUsage: ltrace [option ...] [command [arg ...]]Trace library calls ...

  5. python 参数解析ArgumentParser

    #!/usr/bin/env python #coding:utf-8 from argparse import ArgumentParser #--------------------------- ...

  6. vue中实现浏览器的复制功能

    点击复制,就可以实现copy <p class="inline-block"> <span >{{fenxiao.appSecret}}</span& ...

  7. Jenkins自动化构建(二)众多问题

    1.反向代理设置有误 系统管理页面提示,反向代理设置有误,其实这是由于URL设置有问题: 打开系统管理-->系统设置-->URL Jenkins URL设置有问题,改一下,去掉jenkin ...

  8. Vue开始

    Vue搭建项目 搭建VUe项目之前需要先安装脚手架,不然项目搭建完会有警告. 最后稍等一定的时间,运行结果如下: 出现上述提示,是因为我们没有先安装vue-cli,接下来,我们安装vue-cli 安装 ...

  9. 001- CreateProcess failed with error 216 (no message available)错误详解

    问题详解 runnerw.exe: CreateProcess failed with error 216 (no message available) 看描述,创建进程失败,应该是main这个入口文 ...

  10. leetCoder-wordBreak判断能否分词

    题目 Given a non-empty string s and a dictionary wordDict containing a list of non-empty words, determ ...