spring mvc 的ajax传参详解

前端ajax注意点

1.如果data里面有数据需要 JSON.stringify(data)

2.必须配置 "contentType": "application/json;charset=utf-8;"

3.crud 对应的方法 post get put delete （增查改删）

<%--Created by IntelliJ IDEA.User: ifelseDate: 2022/5/2Time: 17:20To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><style>.smart-green {margin-left: auto;margin-right: auto;max-width: 500px;background: #F8F8F8;padding: 30px 30px 20px 30px;font: 21px Arial, Helvetica, sans-serif;color: #666;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}.smart-green h1 {font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;padding: 20px 0px 20px 40px;display: block;margin: -30px -30px 10px -30px;color: #FFF;background: #9DC45F;text-shadow: 1px 1px 1px #940f17;border-radius: 5px 5px 0px 0px;-webkit-border-radius: 5px 5px 0px 0px;-moz-border-radius: 5px 5px 0px 0px;border-bottom: 1px solid #89AF4C;}.smart-green h1 > span {display: block;font-size: 11px;color: #FFF;}.smart-green label {display: block;margin: 0px 0px 5px;}.smart-green label > span {float: left;margin-top: 10px;color: #a31616;}.smart-green input[type="text"], .smart-green input[type="email"],.smart-green textarea, .smart-green select {color: #555;height: 30px;line-height: 15px;width: 100%;padding: 0px 0px 0px 10px;margin-top: 2px;border: 1px solid #E5E5E5;background: #FBFBFB;outline: 0;-webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);font: normal 14px/14px Arial, Helvetica, sans-serif;}.smart-green textarea {height: 100px;padding-top: 10px;}.smart-green .button {background-color: #9DC45F;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-border-radius: 5px;border: none;padding: 10px 25px 10px 25px;color: #FFF;text-shadow: 1px 1px 1px #949494;}.smart-green .button:hover {background-color: #80A24A;}.error-msg{color: red;margin-top: 10px;}.success-msg{color: #80A24A;margin-top: 10px;margin-bottom: 10px;}button{color: rgba(35, 15, 102, 0.97);width: 150px;height:30px;background-color: #e4ffee;}</style></head>
<body><div style="text-align: center" class="smart-green" ><form action="#" method="post" id="fm"><h1>会员信息</h1><div><span></span><input type="hidden" name="id" value="${mem.id}"></div><div><label> <span>姓名</span></label><input type="text" name="mname" value="${mem.mname}"></div><div><label> <span>性别</span></label><input type="hidden" name="mgender" id="radio1"  value="${mem.mgender}"><label><input type="radio" name="mgender" id="radio"  value="男">男&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="mgender" id="radio2" value="女" >女</label></div><h2></h2><div> <label><span>年龄</span></label><input type="text" name="mage" value="${mem.mage}" ></div><div><label><span>家庭住址</span></label><input type="text" name="maddress" value="${mem.maddress}"></div><div><label><span>Email</span></label><input type="text" name="memail" value="${mem.memail}"></div></form><div class="container-fluid"><div class="row-fluid"><div class="span12"><button class="btn btn-large btn-success" type="button" onclick="up()" >修改</button><button class="btn btn-warning btn-large" type="button" onclick="ss()">重置</button></div></div></div></div></body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">window.onload = function() {if($("#radio1").val()=="男"){$('input:radio:first').attr('checked', 'checked');}else{$('input:radio:last').attr('checked', 'checked');}}function up() {var  array=$("#fm").serializeArray();var data={};for(var i = 0;i<array.length;i++){data[array[i].name]=array[i].value;}for ( var i in data) {if(data[i].trim()==""){alert("会员姓名·年龄不能为空");return;}}$.ajax( {"url"            :  "${pageContext.request.contextPath}/manger/updateM",                      // 要提交的URL路径"type"         :  "put",                     // 发送请求的方式"data"         :  JSON.stringify(data),                      // 要发送到服务器的数据"contentType": "application/json;charset=utf-8;","dataType" :  "text",                   // 指定传输的数据格式"success"  :  function(result) {// 请求成功后要执行的代码console.log(result);if(result=="1"){alert("修改成功");window.location.href="${pageContext.request.contextPath}/manger/toHello";}else{alert("修改失败");}},"error"       :  function() {alert("网络正忙");}} );}function ss() {location.reload();}</script></html>

后端Controller层注意点

1. @RequestMapping后面 method的方法要对应

(value = "updateM",produces = "application/json;charset=utf-8;",method = RequestMethod.PUT)

2.要加responseBody

3.如果有参数参数前面要加@requestBody

package kj15.controller;import kj15.pojo.Membersinfo;
import kj15.service.inner.IMangerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpSession;
import java.util.ArrayList;
import java.util.List;@Controller
@RequestMapping("manger")
public class MembersinfoController {@Autowiredprivate IMangerService ims;@RequestMapping("toHello")public String toHello(){System.err.println("----------------");return "/jsp/Hello";}@RequestMapping(value = "toQuery",produces = "application/json;charset=utf-8;",method = RequestMethod.GET)@ResponseBodypublic List<Membersinfo> toQuery(){try {System.err.println("22222222222222");return ims.queryAll();} catch (Exception e) {e.printStackTrace();}return new ArrayList<>();}@RequestMapping(value = "toDel",produces = "application/json;charset=utf-8;",method = RequestMethod.DELETE)@ResponseBodypublic String toDel(@RequestBody Membersinfo membersinfo){try {boolean b = ims.deleteOneById(membersinfo.getId());if(b){return "1";}} catch (Exception e) {e.printStackTrace();}return "2";}@RequestMapping( "toUpdate")public String toUpdate(int id, HttpSession httpSession){System.err.println("==========="+id);try {Membersinfo membersinfo = ims.queryOneById(id);System.out.println(membersinfo);if(membersinfo!=null){httpSession.setAttribute("mem",membersinfo);}return "jsp/Update";} catch (Exception e) {e.printStackTrace();}return "jsp/Hello";}@RequestMapping(value = "updateM",produces = "application/json;charset=utf-8;",method = RequestMethod.PUT)@ResponseBodypublic String updateM(@RequestBody Membersinfo mm){try {System.out.println(mm);boolean update = ims.update(mm);if(update){return "1";}} catch (Exception e) {e.printStackTrace();}return "2";}@RequestMapping("toAddM")public String toAddM(){System.out.println("我去了增加页面");return "/jsp/AddM";}@RequestMapping(value = "AddM",produces = "application/json;charset=utf-8;",method = RequestMethod.POST)@ResponseBodypublic String AddM(@RequestBody Membersinfo mm){try {System.out.println(mm);boolean b = ims.addOne(mm);if(b){return "1";}} catch (Exception e) {e.printStackTrace();}return "2";}}

spring mvc 的ajax传参详解相关推荐

Spring/Boot/Cloud系列知识：SpringMVC 传参详解（下）
(接上文<Spring/Boot/Cloud系列知识:SpringMVC 传参详解(上)>) 2.3.通过@PathVariable注解基于URL匹配符接收请求传参为了便于开发人员实现更 ...
java注解式开发_JAVA语言之Spring MVC注解式开发使用详解[Java代码]
本文主要向大家介绍了JAVA语言的Spring MVC注解式开发使用详解,通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助. MVC注解式开发即处理器基于注解的类开发, 对于每一个定义的处 ...
C#进阶系列——WebApi 接口参数不再困惑：传参详解
看这边文章时的疑惑是:WebApi中的参数加了[FromBody],不知所以然,就百度了下,看到了以下文章,和大家分享下: 原文链接:http://www.cnblogs.com/landeanfen ...
WebApi 接口参数不再困惑：传参详解
阅读目录一.get请求 1.基础类型参数 2.实体作为参数 3.数组作为参数 4."怪异"的get请求二.post请求 1.基础类型参数 2.实体作为参数 3.数组作为参数 4 ...
【转】C#进阶系列——WebApi 接口参数不再困惑：传参详解
阅读目录一.get请求 1.基础类型参数 2.实体作为参数 3.数组作为参数 4."怪异"的get请求二.post请求 1.基础类型参数 2.实体作为参数 3.数组作为参数 4 ...
python可变参数_Python 的四种共享传参详解
点击上方"Python数据之道",选择"星标公众号" 精品文章,第一时间送达作者 | 杨仁聪编辑 | Lemon 出品 | Python数据之道本文来自公 ...
spring MVC请求处理类注解属性详解
spring MVC请求处理类注解属性详解
Vue路由传参详解（params 与 query）
Vue路由传参详解(params 与 query) 前言: 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显 ...
Springboot传参详解
作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
uboot引导kernel - 3 -uboot给内核传参详解
uboot中执行theKernel函数后,kernel正式启动.如下函数,我们发现有3个参数. 1. 参数 0: 2. 参数machid; 如下code 中获取machid, gd是个全局变量. 2. ...

spring mvc 的ajax传参详解

前端ajax注意点

后端Controller层注意点

spring mvc 的ajax传参详解相关推荐

最新文章

热门文章