springdata+ajax+json

最新推荐文章于 2024-07-21 22:36:34 发布

原创最新推荐文章于 2024-07-21 22:36:34 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用JSP页面结合Ajax实现数据提交至数据库的例子。通过按钮触发Ajax请求，将表单数据发送到后端控制器进行处理，并最终保存到数据库中。涉及JSP页面设计、Ajax请求构造及Spring框架的控制器编写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsp页面:ajax，把Jsp页面的值传到数据库，要经过controller，<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主页</title>
<script type="text/javascript" src="/<%=request.getContextPath()%>/js/jquery-2.0.3.min.js"></script>
</head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js 

"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js 

"></script>
<body>
this is a json.jsp!
<hr>


<!-- <form action="saveemp" method="post"> -->
name:<input type="text" name="name" id="name">
<br/>
sex:<input type="text" name="sex" id="sex">
<br/>
hobas:<input type="text" name="hobas" id="hobas">
<br>
<!-- <input type="submit" value="提交数据"> -->
 <input onclick="myfun()" type="button" value="click here">
<!-- </form> -->
<script type="text/javascript">
/**
 * name
 */
function myfun(){ 
	alert(1);
	// 调用Ajax函数,向服务器端发送查询  
   // var mydata={"name":"zhou","age":"23"};      
    $.ajax( {
    url : "http://localhost:8080/yanshuspringjpa/saveemp",
    dataType:"json",
   // data : mydata,
   data:{"name":$("#name").val(),"sex":$("#sex").val(),"hobas":$("#hobas").val()},
    success : function(data) {
        alert(data.name);
    }
  });
}

</script>
</body>
</html>

controller的业务

package com.yanshu.controller;


import java.util.HashMap;
import java.util.Map;


import org.springframework.beans.factory.annotation.Autowired;
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 com.alibaba.fastjson.JSON;
import com.yanshu.pojo.Emp;
import com.yanshu.pojo.Shop;
import com.yanshu.repsotory.EmpRepsitory;
import com.yanshu.service.EmpService;


@Controller
public class JsonController {
	
	@Autowired
	private EmpService empservice;
	
	@RequestMapping("ajaxjson")
	@ResponseBody
	public Map<String, Object> getpic(String name,String age)
	{
		 System.out.println(name+"------"+age);
		System.out.println("---ajaxjson---");
		  Map<String, Object> userMap = new HashMap<String, Object>();
	        userMap.put("name", "zhou");
	        userMap.put("age", "23");
	        userMap.put("gender", "男");
	        userMap.put("address", "重庆");
		//return "content";
	        return userMap;
		
	}
	@RequestMapping("jsonadd")
	@ResponseBody
	public Shop getShopJson()
	{
		Shop shop=new Shop();
		System.out.println("shop");
		shop.setName("tom");
		shop.setStaffName(new String[]{"v1","v2"});
		System.out.println(shop+"----shop");
		System.out.println(shop.toString()+"----shop");
		return shop;
		
	}
	@RequestMapping(value="/saveemp" , method = { RequestMethod.POST, RequestMethod.GET }, produces = "text/json;charset=UTF-8")
	@ResponseBody
	public String saveUser(Emp emp){
				
				
				empservice.saveEmp(emp);
		     	
		        System.out.println("user="+emp.toString());
			    return JSON.toJSONString(emp);	
	}
}