1.加载的html页面,访问该页面会访问后台数据，进行该数据的回显
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <div id="app"> <form id="Forms"> <input type="hidden" name="id" :value="id"> 用户名：<input type="text" name="name" :value="name"><br> 年龄：<input type="text" name="age" :value="age"><br> 喜爱的网站：<select v-model="fruit" name="fruit"> <option value="">选择一个网站</option> <option value="1">Runoob</option> <option value="2">Google</option> </select><br> 性别： 男<input type="radio" name="gender" value="男" v-model="gender"> 女<input type="radio" name="gender" value="女" v-model="gender"><br> 读书<input type="checkbox" name="hobbies" value="读书" v-model="hobbies"> 音乐<input type="checkbox" name="hobbies" value="音乐" v-model="hobbies"> 旅行<input type="checkbox" name="hobbies" value="旅行" v-model="hobbies"><br> <button οnclick="submitForm()">提交</button> </form> </div> <script> var data={ id:null, name:null, age:null, fruit:"", gender:"男", hobbies:[] } new Vue({ el: '#app', data: data }) </script> <script> //回显该数据，测试设置0,应该根据id查询该信息 queryData(0); function queryData(id) { $.post("/api/test/getUserDataMap.do",function (res) { data.id=res.id; data.name=res.name; data.age=res.age; data.fruit=res.fruit; data.gender=res.gender; //checkbox需要注意了，后台已经给了hobbies初始值了,赋值的是一个数组 for(var i=0;i<res.hobbies.length;i++){ data.hobbies[i]=res.hobbies[i]; } },"json") } //提交表单 function submitForm() { var param =$("#Forms").serialize(); $.post("/api/test/edit.do",param,function (res) { alert(res.states); },"json") } </script> </body> </html>
2.后台数据
package com.apes.oves.front.controller; import com.apes.core.util.ResponseUtil; import com.apes.oves.core.bean.Brake; import org.apache.commons.collections.map.HashedMap; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.util.Map; /** * */ @RequestMapping("/test") @Controller public class TestController { @RequestMapping("/getUserDataMap.do") @ResponseBody public Map getUserDataMap(HttpServletRequest request, HttpServletResponse response)throws Exception{ System.out.println("name=="+request.getParameter("name")); System.out.println("age=="+request.getParameter("age")); System.out.println("fruit=="+request.getParameter("fruit")); System.out.println("gender=="+request.getParameter("gender")); //后台接受checkbox注意，checkbox为多值的，没有选择，获取的为null String [] hobbies=request.getParameterValues("hobbies"); if(hobbies!=null&&hobbies.length>0){ for(String s: hobbies){ System.out.println("兴趣爱好："+s); } } Map<String,Object> map = new HashedMap(); map.put("id","123456789"); map.put("name","张三"); map.put("age","25"); map.put("fruit","2"); map.put("gender","女"); //处理checkbox问题 map.put("hobbies",new String[]{"旅行","音乐"}); return map; } @RequestMapping("/edit.do") @ResponseBody public Map edit(HttpServletRequest request, HttpServletResponse response)throws Exception{ System.out.println("name=="+request.getParameter("name")); System.out.println("age=="+request.getParameter("age")); System.out.println("fruit=="+request.getParameter("fruit")); System.out.println("gender=="+request.getParameter("gender")); //后台接受checkbox注意，checkbox为多值的，没有选择，获取的为null String [] hobbies=request.getParameterValues("hobbies"); if(hobbies!=null&&hobbies.length>0){ for(String s: hobbies){ System.out.println("兴趣爱好："+s); } } Map<String,Object> map = new HashedMap(); map.put("states","更新成功"); return map; } }
