JS将form表单转换为json数据,使用ajax发送请求案例

$(function(){
			
			//将form表单转换为json数据
			$.fn.serializeJson=function(){  
	            var serializeObj={};  
	            var array=this.serializeArray(); //将form表单序列化数组对象 
	            var str=this.serialize();  //将form表单序列化字符串
	            $(array).each(function(){  //遍历表单数组拼接json串
	                if(serializeObj[this.name]){   
	                    if($.isArray(serializeObj[this.name])){  
	                        serializeObj[this.name].push(this.value);  
	                    }else{  
	                        serializeObj[this.name]=[serializeObj[this.name],this.value];
	                    }  
	                }else{  
	                    serializeObj[this.name]=this.value;   
	                }  
	            });  
	            return serializeObj;  
	        }; 
	        
	        // 点击查询按钮,将form数据转换为json 绑定datagrid 
	     	$("#button").click(function(){
					// 转换form对象 到 json,发送请求
					var params = $("#loginForm").serializeJson();
					$.post('$rc.contextPath/niuniu/shopKeeperlogin',params,function(data){
						if(data.isSuccess==0){
							alert(data.message);
						}else if(data.isSuccess==1){
							window.location.href="$rc.contextPath/niuniu/userLogin";
						}
					})

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
前端代码: 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()方法返回登录成功信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值