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

2016-12-05 11:24:27来源:CSDN作者:vitelon人点击

好久没用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. */@Controllerpublic 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;    }}
点击查询报,SpringMVC json问题(406 Not Acceptable)


因为controller中用到@ResponeBody注解,该注解是把map转换为json传给前台,而我没有引入json的包,所以才会出现这个错误。

解决方法:

1.导入第三方jackson包,Jackson-mapper-asl-1.9.13.jar和jackson-asl-1.9.13.jar。

如果是maven项目,则maven配置如下

<dependency>  <groupId>org.codehaus.jackson</groupId>  <artifactId>jackson-core-asl</artifactId>  <version>1.9.13</version></dependency><dependency>  <groupId>org.codehaus.jackson</groupId>  <artifactId>jackson-mapper-asl</artifactId>  <version>1.9.13</version></dependency>
完整的maven配置文件

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">  <modelVersion>4.0.0</modelVersion>  <groupId>demo</groupId>  <artifactId>demo</artifactId>  <packaging>war</packaging>  <version>1.0-SNAPSHOT</version>  <name>demo Maven Webapp</name>  <url>http://maven.apache.org</url>  <properties>    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>    <!-- spring版本号 -->    <spring.version>4.1.4.RELEASE</spring.version>    <!-- mybatis版本号 -->    <mybatis.version>3.2.8</mybatis.version>    <!-- log4j日志文件管理包版本 -->    <slf4j.version>1.7.7</slf4j.version>    <log4j.version>1.2.17</log4j.version>    <!-- jackson包版本 -->    <jackson.version>2.5.0</jackson.version>  </properties>  <dependencies>    <!--单元测试依赖 -->    <dependency>      <groupId>junit</groupId>      <artifactId>junit</artifactId>      <version>4.11</version>      <!-- 表示开发的时候引入,发布的时候不会加载此包 -->      <scope>test</scope>    </dependency>    <!--spring单元测试依赖 -->    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-test</artifactId>      <version>${spring.version}</version>      <scope>test</scope>    </dependency>    <!-- springMVC核心包 -->    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-webmvc</artifactId>      <version>${spring.version}</version>    </dependency>    <!-- spring核心包 -->    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-core</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-beans</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-context</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-context-support</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-tx</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-web</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-jdbc</artifactId>      <version>${spring.version}</version>    </dependency>    <!-- mybatis核心包 -->    <dependency>      <groupId>org.mybatis</groupId>      <artifactId>mybatis</artifactId>      <version>${mybatis.version}</version>    </dependency>    <!--mybatis spring 插件 -->    <dependency>      <groupId>org.mybatis</groupId>      <artifactId>mybatis-spring</artifactId>      <version>1.2.2</version>    </dependency>    <!-- 导入java ee jar 包 -->    <!--<dependency>-->    <!--<groupId>javax</groupId>-->    <!--<artifactId>javaee-api</artifactId>-->    <!--<version>7.0</version>-->    <!--</dependency>-->    <!-- 导入Mysql数据库链接jar包 -->    <dependency>      <groupId>mysql</groupId>      <artifactId>mysql-connector-java</artifactId>      <version>5.1.34</version>    </dependency>    <!-- 导入dbcp的jar包,用来在applicationContext.xml中配置数据库 -->    <dependency>      <groupId>commons-dbcp</groupId>      <artifactId>commons-dbcp</artifactId>      <version>1.2.2</version>    </dependency>    <!-- JSTL标签类 -->    <dependency>      <groupId>jstl</groupId>      <artifactId>jstl</artifactId>      <version>1.2</version>    </dependency>    <!-- 日志文件管理包 -->    <!-- log start -->    <dependency>      <groupId>log4j</groupId>      <artifactId>log4j</artifactId>      <version>${log4j.version}</version>    </dependency>    <dependency>      <groupId>org.slf4j</groupId>      <artifactId>slf4j-api</artifactId>      <version>${slf4j.version}</version>    </dependency>    <dependency>      <groupId>org.slf4j</groupId>      <artifactId>slf4j-log4j12</artifactId>      <version>${slf4j.version}</version>    </dependency>    <!-- 格式化对象,方便输出日志 -->    <dependency>      <groupId>com.alibaba</groupId>      <artifactId>fastjson</artifactId>      <version>1.1.41</version>    </dependency>    <!-- log end -->    <!-- servlet -->    <!--<dependency>-->    <!--<groupId>javax.servlet</groupId>-->    <!--<artifactId>servlet-api</artifactId>-->    <!--<version>3.0-alpha-1</version>-->    <!--</dependency>-->    <dependency>      <groupId>javax.servlet</groupId>      <artifactId>javax.servlet-api</artifactId>      <version>3.0.1</version>      <scope>provided</scope>    </dependency>    <dependency>      <groupId>javax.servlet.jsp</groupId>      <artifactId>jsp-api</artifactId>      <version>2.2</version>      <scope>provided</scope>    </dependency>    <dependency>      <groupId>javax.servlet</groupId>      <artifactId>jstl</artifactId>      <version>1.2</version>    </dependency>    <!-- 映入JSON -->    <dependency>      <groupId>org.codehaus.jackson</groupId>      <artifactId>jackson-core-asl</artifactId>      <version>1.9.13</version>    </dependency>    <dependency>      <groupId>org.codehaus.jackson</groupId>      <artifactId>jackson-mapper-asl</artifactId>      <version>1.9.13</version>    </dependency>    <dependency>      <groupId>com.fasterxml.jackson.core</groupId>      <artifactId>jackson-annotations</artifactId>      <version>${jackson.version}</version>    </dependency>    <dependency>      <groupId>com.fasterxml.jackson.core</groupId>      <artifactId>jackson-databind</artifactId>      <version>${jackson.version}</version>    </dependency>    <dependency>      <groupId>com.fasterxml.jackson.core</groupId>      <artifactId>jackson-core</artifactId>      <version>${jackson.version}</version>    </dependency>    <!--<dependency>-->    <!--<groupId>net.sf.json-lib</groupId>-->    <!--<artifactId>json-lib</artifactId>-->    <!--<version>2.4</version>-->    <!--</dependency>-->    <dependency>      <groupId>dom4j</groupId>      <artifactId>dom4j</artifactId>      <version>1.4</version>    </dependency>    <!-- 上传组件包 -->    <dependency>      <groupId>commons-fileupload</groupId>      <artifactId>commons-fileupload</artifactId>      <version>1.3.1</version>    </dependency>    <dependency>      <groupId>commons-io</groupId>      <artifactId>commons-io</artifactId>      <version>2.4</version>    </dependency>    <dependency>      <groupId>commons-codec</groupId>      <artifactId>commons-codec</artifactId>      <version>1.9</version>    </dependency>    <dependency>      <groupId>org.apache.commons</groupId>      <artifactId>commons-collections4</artifactId>      <version>4.0</version>    </dependency>    <dependency>      <groupId>org.apache.commons</groupId>      <artifactId>commons-lang3</artifactId>      <version>3.3.2</version>    </dependency>  </dependencies>  <build>    <finalName>demo</finalName>    <!-- 解决Maven项目编译后classes文件中没有.xml问题 -->    <resources>      <resource>        <directory>src/main</directory>        <includes>          <include>**/*.xml</include>        </includes>        <filtering>true</filtering>      </resource>    </resources>  </build></project>


2.添加Spring配置文件

<?xml version="1.0" encoding="UTF-8"?>  <beans xmlns="http://www.springframework.org/schema/beans"      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xmlns:context="http://www.springframework.org/schema/context"    xmlns:mvc="http://www.springframework.org/schema/mvc"     xsi:schemaLocation="http://www.springframework.org/schema/beans                            http://www.springframework.org/schema/beans/spring-beans-4.1.xsd                        http://www.springframework.org/schema/context                            http://www.springframework.org/schema/context/spring-context-4.1.xsd                        http://www.springframework.org/schema/mvc                            http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd">    <!-- 开启注解模式驱动 -->    <mvc:annotation-driven/>    <!-- 扫包 -->    <context:component-scan base-package="com.springmvc.*"/>    <!-- 映射静态资源 -->    <mvc:default-servlet-handler />    <!--<mvc:resources location="/resource/" mapping="/resources/**"/>-->    <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />    <!-- 返回json,方法一,需要导入 jackson-annotations.jar,jackson-core.jar,jackson-databind.jar -->    <bean id="requestMappingHandlerAdapter" class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">        <property name="messageConverters">            <list>                <bean class="org.springframework.http.converter.StringHttpMessageConverter">                    <property name="supportedMediaTypes">                        <list>                            <value>text/plain;charset=UTF-8</value>                        </list>                    </property>                </bean>                <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">                    <property name="supportedMediaTypes">                        <list>                            <value>text/html;charset=UTF-8</value>                            <value>application/json;charset=UTF-8</value>                        </list>                    </property>                </bean>            </list>        </property>    </bean>    <!-- 视图渲染 jsp/freemaker/velocity-->    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">        <!-- 制定页面存放的路径 -->        <property name="prefix" value="/WEB-INF/page/"></property>        <!-- 文件的后缀 -->        <property name="suffix" value=".jsp"></property>    </bean></beans>




使用ajax更新下拉框就做好了,写得不好的请见谅!








最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台