AJAX提交下拉框更新数据小笔记

最新推荐文章于 2023-05-22 22:27:23 发布

「已注销」

最新推荐文章于 2023-05-22 22:27:23 发布

阅读量3k

点赞数 1

分类专栏： SpringMVC Java maven 文章标签： idea maven java spring mvc ajax

本文链接：https://blog.csdn.net/vitelon/article/details/53441102

版权

好久没用ajax写下拉框了，让我现在直接写一个使用ajax提交下拉框的例子，我是真的不能一下子写出来的，作为后端开发人员，这些也不是经常用，所以现在写出来记录下来，方便以后回头看看，写的不好请见谅！

本例子是搭配好的SpringMVC框架下写的。

我的SpringMVC搭建的小例子地址：用maven搭建的SpringMVC框架的小例子

1、HTML页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax更新数据</title>
    <script src="/resources/js/jquery.js"></script>
</head>
<body>
    <div>
        <select name="selectPerson" id="selectPerson">
            <option value="0" selected>请选择</option>
            <option value="1">张三</option>
            <option value="2">李四</option>
            <option value="3">王五</option>
        </select>
        <input type="button" class="btn" value="查询"/>
    </div>
    <br>
    <div class="content"></div>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        $('.btn').click(function(){
            //获取下拉框的值
            var opt_values = $("#selectPerson  option:selected").val();
            if (opt_values == 0){
                alert("请选择要查询的选项！");
                return false;
            }
            $.ajax({
                type: "get",
                url: "/ajax",
                dataType: "json",
                data: {
                    opt_values:opt_values
                },
                success: function (data) {
                    var person = data["person"];
                    console.log("person:"+person);
                    $(".content").text(person);
                }
            });
        });
    });
</script>
</html>

2、controller代码如下

package com.springmvc.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.Map;

/**
 * Created by vitelon on 2016/12/3.
 */
@Controller
public class TestController {

    /**
     * @ResponseBody 该注解可以把map自动转换成json格式给前台
     */
    @RequestMapping(value = "/ajax",method = RequestMethod.GET, produces = "application/json")
    @ResponseBody
    public Map ajax(HttpServletRequest request){

        Map mapJson = new HashMap();
        String person;
        String optValues = request.getParameter("opt_values");
        if ("1".equals(optValues)){
            person = "姓名：张三，年龄：24，性别：男，出生地：广西南宁";
            mapJson.put("person",person);
        }
        if ("2".equals(optValues)){
            person = "姓名：李四，年龄：30，性别：男，出生地：广西百色";
            mapJson.put("person",person);
        }
        if ("3".equals(optValues)){
            person = "姓名：王五，年龄29，性别：男，出生地：广西桂林";
            mapJson.put("person",person);
        }
        return mapJson

最低0.47元/天解锁文章

「已注销」

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
AJAX提交下拉框更新数据小笔记

好久没用ajax写下拉框了，让我现在直接写一个使用ajax提交下拉框的例子，我是真的不能一下子写出来的，作为后端开发人员，这些也不是经常用，所以现在写出来记录下来，方便以后回头看看，写的不好请见谅！本例子是搭配好的SpringMVC框架下写的。我的SpringMVC搭建的小例子地址：用maven搭建的SpringMVC框架的小例子1、HTML页面代码 a
复制链接

扫一扫