如何将单击的单选按钮的值传递给Spring MVC控制器?

时间:2014-03-06 04:01:50

标签: java jquery spring jsp spring-mvc

我在我的一个项目中使用Spring MVC控制器。

下面是我的JSP代码,其中将显示三个单选按钮。一个是Insert,第二个单选按钮是Update,第三个单选按钮是Delete

点击Insert单选按钮后,它会在Insert单选按钮旁边显示两个文本框,同样也会显示其他两个单选按钮。这是我的jsfiddle

<script type="text/javascript">
    $(document).ready(function(){
        $(".changeAction").on("click", function(){
            $('.changeable').html('')
            var divId = "#" + $(this).attr("div-id");
            var myInput = '<label for="Node"> Node </label> <input type="text" name="node" size="20" /> <label for="Data"> Data </label> <input type="text" name="data" size="100"/>'
            $(divId).html(myInput);
        })
    })      
</script>

<body>
<form method="post" action="testOperation">
    <!-- I used only one hidden box to store value -->
    <input type="hidden" name="name" id="dynamicName">
    <input class="changeAction" type="radio" name="tt" value="Insert" div-id="insert"/> Insert
    <div id="insert" class="changeable"></div>
    <br/> <input class="changeAction" type="radio" name="tt" value="Update" div-id="update"/> Update
    <div id="update" class="changeable"></div>
    <br/> <input class="changeAction" type="radio" name="tt" value="Delete" div-id="delete"/> Delete
    <div id="delete" class="changeable"></div>
    <br/>
    <input type="submit">
</form>
</body>

以下是我在Controller代码中的方法 -

   @RequestMapping(value = "testOperation", method = RequestMethod.GET)
    public Map<String, String> testOperation() {
        final Map<String, String> model = new LinkedHashMap<String, String>();
        return model;
    }

    @RequestMapping(value = "testOperation", method = RequestMethod.POST)
    public Map<String, String> testOperations(@RequestParam String name, 
                                              @RequestParam String node, 
                                              @RequestParam String data) {
        final Map<String, String> model = new LinkedHashMap<String, String>();

        System.out.println(name);
        System.out.println(node);
        System.out.println(data);

        return model;
    }

问题陈述: -

假设我点击Insert单选按钮并在第一个文本中输入Hello,在第二个文本框中输入World,然后我会点击提交按钮,之后我会看到Hello变量中的node值和World变量中的data值是正确的。

但不知何故,name变量显示为空,而不应显示insert值,因为我点击了插入单选按钮。

同样的事情应该发生在更新和删除单选按钮..

有什么想法我在做什么错?

2 个答案:

答案 0 :(得分:3)

用这个替换你的Javascript。它对我有用。

$(document).ready(function(){
    $(".changeAction").on("click", function(){
        $('.changeable').html('')
        var divId = $(this).attr("div-id");
        $("#dynamicName").val(divId);
        divId = "#"+divId;
        var myInput = '<label for="Node"> Node </label> <input type="text" name="node" size="20" /> <label for="Data"> Data </label> <input type="text" name="data" size="100"/>'
        $(divId).html(myInput);
    })
})

这里是jsfiddle http://jsfiddle.net/EGJk8/5/

答案 1 :(得分:0)

将代码更改为,

来自,

@RequestParam String name

To,

@RequestParam String tt

因为您已将单选按钮的名称称为tt。所以无法获得像Insert , Update , Delete这样的价值。