之前没用vue的时候,我是用的form表单传值,每次都要挨个接受。今天,展示vue和jq结合传JSON数据,添加数据。
最重要的是,需要配置pom文件
<!-- java 与json 数据转换 -->
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.2.3</version>
<classifier>jdk15</classifier>
</dependency>
前端 +vue 代码 :
<div id="app>
<input type="text" v-model="news.nname" id="name"/>
<select name="tid" v-model="news.tid">
<option value="0">请选择</option>
<option value="1">体育</option>
<option value="2">文学</option>
</select>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
news:{tid:0}, // 定义一位数组,存值
},
mounted(){
},
methods:{
check:function(){
vm.news.ntime=$("#test1").val();
//alert(JSON.stringify(this.news));
$.post("/news/ins",{json:JSON.stringify(this.news)},function(data){ //转成JSON,传递
if(data=="1"){
alert("添加成功");
window.location.href="/ht/news"; //成功就跳转页面
}
})
},
}
})
</script>
后端 代码 :
//添加
@RequestMapping("ins")
@ResponseBody
public String ins(HttpServletRequest req) {
//添加代码
JSONObject jss=new JSONObject();
String json=req.getParameter("json"); //获取JSON字符串
try {
JSONObject js=JSONObject.fromObject(json);
News news=(News)JSONObject.toBean(js,News.class); //实例化
newsService.ins(news);
} catch (Exception e) {
// TODO: handle exception
}
return "1";
}