好久没用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