前端用ajax发送json数据到后台,并接收后台传回的json数据【包含ajax提交表单】

一、前后端发送与接收json数据
前端代码
	function pay(data) {
		//将数据按json格式存放
		var info = {"orderId":data};
		$.ajax({
	         url: "/testOrder",
	         data: JSON.stringify(info),//将数据转化为json格式
	         dataType: 'json',//接收后台数据的格式
	         type: "POST",
	         contentType: "application/json;charset=utf-8",//发送给后台数据的格式
	         //发送成功后执行,response中存的是从后台返回的json数据,名字可以随意改
	         success: function(response) {
		     	if(response.code == 1) {
		     		alert(response.msg);
		     	} else {
		     		document.getElementById('orderId').value = data;
		     		document.getElementById('orderId_form').submit();
		     	}
	         }
	    })
	}
后台代码
	@RequestMapping(value = "/testOrder")
	@ResponseBody   //设置返回值为string
	public String testOrder(@RequestBody JSONObject json) {
		//使用@RequestBody注解,将前台传送过来的数据存到json中
		if(hostHolder.getMember() == null) {
			return "redirect:/login";
		}
		
		if(orderServiceImpl.getOrder(json.getString("orderId")) == null) {
			return JSONStringUtil.getJSONString(1, "无效订单");//返回json格式的数据,JSONStringUtil是我自己定义的json工具类
		} else {
			return JSONStringUtil.getJSONString(0, "有效订单");
		}
		
	}

SONStringUtil.getJSONString()方法的代码

public static String getJSONString(int code, String msg) {
        JSONObject json = new JSONObject();
        json.put("code", code);
        json.put("msg", msg);
        return json.toJSONString();
    }
二、用ajax提交form表单
前端代码

myform是表单id
使用.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

	$.ajax({
		url: "/saveGoodsInfor?id=<%=goods.getID()%>",
		type: 'post', 
		data: $("#myform").serialize(),
		dataType: 'json',
		success: function (res) {
			if(res.code == 0) {
				alert(res.msg);
				window.location.href="/manageGoods";
			} else {
				alert(res.msg);
			}	            
	       }
	})
后台代码

定义实体类Goods接收表单中的内容,如要注意的时,表单中各项的name属性需与实体类中变量名相同

	@RequestMapping(value = "/saveGoodsInfor")
	@ResponseBody
	public String alterGoodsInfor(@RequestParam("id") int id, Goods goods) {
		
		if(hostHolder.getMember() == null || hostHolder.getMember().getType() != 1) {
			return "redirect:/login";
		}
		
		goods.setID(id);
		if(goods.getNowPrice().equals(new BigDecimal("-1"))) {
			goods.setSale(0);
		}
		if(goodsServiceImpl.setInfo(goods) == 0) {
			return JSONStringUtil.getJSONString(1, "修改商品信息失败,请重新修改!!");
		} else {
			return JSONStringUtil.getJSONString(0, "修改商品信息成功");
		}
	}
前端代码: 1. 定义html表单,使用form标签包裹 ```html <form id="myForm" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br><br> <button type="submit" id="submitBtn">提交</button> </form> ``` 2. 监听表单提交事件,使用jquery发送ajax请求 ```javascript $('#myForm').submit(function(event) { event.preventDefault(); // 阻止表单默认提交行为 var formData = { 'username': $('input[name=username]').val(), 'password': $('input[name=password]').val() }; $.ajax({ type: 'POST', url: '/api/login', data: JSON.stringify(formData), dataType: 'json', contentType: 'application/json', success: function(data) { console.log(data); }, error: function(jqXHR, textStatus, errorThrown) { console.log(jqXHR.responseText); } }); }); ``` 后端代码: 1. 定义接收请求的controller方法 ```java @RestController @RequestMapping("/api") public class LoginController { @PostMapping("/login") public ResponseEntity<?> login(@RequestBody Map<String, String> request) { String username = request.get("username"); String password = request.get("password"); // 处理登录逻辑 return ResponseEntity.ok("登录成功"); } } ``` 2. 使用@RequestBody注解接收json数据,并使用ResponseEntity返回响应数据 ```java @PostMapping("/login") public ResponseEntity<?> login(@RequestBody Map<String, String> request) { String username = request.get("username"); String password = request.get("password"); // 处理登录逻辑 return ResponseEntity.ok("登录成功"); } ``` 步骤讲解: 1. 定义html表单,使用form标签包裹。 2. 监听表单提交事件,阻止表单默认提交行为,获取表单数据,使用jquery发送ajax请求。 3. 后端定义接收请求的controller方法,使用@RequestBody注解接收json数据。 4. 处理接收到的数据,返回响应数据。在本例中,使用ResponseEntity.ok()方法返回登录成功信息。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值