vue&jQuery传JSON值添加数据

之前没用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";
	}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值