ssm ajax 提交表单

最新推荐文章于 2025-09-24 15:12:00 发布

原创最新推荐文章于 2025-09-24 15:12:00 发布 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ajax提交表单

本文介绍如何利用Ajax发送POST请求携带JSON格式的数据到Java后端接口，通过@RequestBody注解接收数据并保存客户信息，同时讨论了如何处理响应。

@RequestBody将ajax提交过来的json数据转化为java对象，(required=false)表示允许为空，如果不为false传过来参数为空报错，@ResponseBody将数据转化为json数据在返回ajax。

@RequestMapping(value="save.do")
	public  @ResponseBody Customer save(@RequestBody(required=false) Customer customer){
		customerService.saveCustomer(customer);
		return customer;
		
	}

$("#aaa").val 通过id为aaa来查找控件，并得到其值。JSON.stringify(customer)从一个对象中解析出字符串，相反JSON.parse()从一个字符串中解析出json对象

 //onclick执行
     function saveCustomer(){
    	 var customer = { 
    			cust_name : $("#cust_name").val(),
		        cust_source : $("#cust_source").val(),
		        cust_industry : $("#cust_industry").val(),
			cust_level : $("#cust_level").val(),
			cust_phone : $("#cust_phone").val(),
			cust_mobile : $("#cust_mobile").val() 
			};
         $.ajax({
             url:'<%=basePath%>customer/save.do',
             data: JSON.stringify(customer),
             type:'post',
            dataType:'json',
             contentType:"application/json",
             success:function(data){
            	 window.location.href="<%=basePath%>customer/list.do";
             },  
         });
     };

另一种方法：通过触发id为saveCustomer控件触发

      $(function (){
		$("#saveCustomer").click(function (){
			var customer = { 
				 cust_name : $("#cust_name").val(),
				 cust_source : $("#cust_source").val(),
				 cust_industry : $("#cust_industry").val(),
				 cust_level : $("#cust_level").val(),
				 cust_phone : $("#cust_phone").val(),
				 cust_mobile : $("#cust_mobile").val()	 
				};
			console.log(customer);
	    	$.ajax({
	         type: "post",
	         url: "<%=basePath%>customer/save.do",
	         data: JSON.stringify(customer),
	         dataType: "json",
	         contentType:"application/json",
	         success: function(data){
	                 window.location.href="<%=basePath%>customer/list.do";
	          		}
	        });
	
		});
		})