jquery ajax向controller的传值总结

最新推荐文章于 2022-03-31 17:11:14 发布
最新推荐文章于 2022-03-31 17:11:14 发布
阅读量797 收藏 4
点赞数 1
文章标签： jquery ajax spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35307406/article/details/109999403
版权

环境说明

jdk1.8，spring版本为4.3.3，jackson版本为2.8.9，lombok版本为1.18.10

如果你没有用lombok插件，将下面的@Data注解去掉，添加get和set方法也可以。

相关配置

applicationContext-mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/tx
        http://www.springframework.org/schema/tx/spring-tx.xsd
        http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <context:component-scan base-package="controller"/>

    <mvc:annotation-driven>
        <mvc:message-converters>
            <bean id="stringHttpMessageConverter" class="org.springframework.http.converter.StringHttpMessageConverter">
                <property name = "supportedMediaTypes">
                    <list>
                        <value>text/html;charset=UTF-8</value>
                        <value>application/json;charset=UTF-8</value>
                    </list>
                </property>
            </bean>
            <bean id="mappingJackson2HttpMessageConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="supportedMediaTypes">
                    <list>
                        <value>text/html;charset=UTF-8</value>
                        <value>application/json;charset=UTF-8</value>
                    </list>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!-- 这里的配置我的理解是自动给后面action的方法return的字符串加上前缀和后缀，变成一个 可用的url地址 -->
        <property name="prefix" value="/application/" />
        <property name="suffix" value=".jsp" />
    </bean>
</beans>

pom.xml自行配置，相关版本上面也说了，比较简单。

具体代码实现

controller层的代码

package controller;

import entity.Account;
import entity.User1;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.Set;

@Controller
@RequestMapping("/user1")
public class User1Controller {
    
    @RequestMapping("/test1")
    @ResponseBody
    public String test1(HttpServletRequest request,String username) throws Exception{
        System.out.println(username);
        return "test1 success";
    }
    @RequestMapping("/test2")
    @ResponseBody
    public String test2(HttpServletRequest request,@RequestParam("username") String name) throws Exception{
        System.out.println(name);
        return "test2 success";
    }
    @RequestMapping("/test3")
    @ResponseBody
    public String test3(HttpServletRequest request,@RequestParam("username") String name,String password) throws Exception{
        System.out.println(name+":"+password);
        return "test3 success";
    }
    @RequestMapping("/test4")
    @ResponseBody
    public String test4(HttpServletRequest request,@RequestBody Integer[] ids
        /*@RequestBody List<Integer> ids  参数名字随意*/) throws Exception{
        System.out.println(ids.length);
        return "test4 success";
    }
    @RequestMapping("/test5")
    @ResponseBody
    public String test5(HttpServletRequest request,
                        //@RequestParam("datas[]") Integer[] ids
                        //@RequestParam("datas[]") Set<Integer> ids
                        @RequestParam("datas[]") List<String> ids
    ) throws Exception{
        //System.out.println(ids.length);
        System.out.println(ids.get(0));
        return "test5 success";
    }
    @RequestMapping("/test6")
    @ResponseBody
    public String test6(HttpServletRequest request,
                        //@RequestParam("datas[]") Integer[] ids
                        //@RequestParam("datas[]") Set<Integer> ids
                        @RequestParam("datas[]") List<Integer> ids
    ) throws Exception{
        //System.out.println(ids.length);
        System.out.println(ids.size());
        return "test6 success";
    }
    @RequestMapping("/test7")
    @ResponseBody
    public String test7(HttpServletRequest request, @RequestBody Map<String,Integer> map) throws Exception{
        System.out.println(map);
        return "test7 success";
    }
    /*
        对于复杂参数，将其封装在一个对象中
        前端将数据转化为json形式，传送到后端的controller
        controller层用@RequestBody接收
     */
    @RequestMapping(value = "/testdemo")
    @ResponseBody
    public String testdemo(HttpServletRequest request,
                           @RequestBody Account account
    ) throws Exception{
        System.out.println(account.getMessage());
        System.out.println(account.getUser1());
        System.out.println(account.getUser2s());
        System.out.println(account.getStringList());
        System.out.println(account.getStringArray());
        System.out.println(account.getIntegerSet());
        return "testdemo success";
    }
}

js的代码

$(function() {
	$("#test1btn").click(function () {
		$.ajax({
			type:"post",
			url:path+"/user1/test1.do",
			data : {"username" : "小明"},
			contentType : "application/x-www-form-urlencoded",
			success:function(data){
				alert(data);
			},
			error: function(){
				alert("test1 error");
			}
		});
	});
	$("#test2btn").click(function () {
		$.ajax({
			type:"post",
			url:path+"/user1/test2.do",
			data : {"username" : "小明"},
			contentType : "application/x-www-form-urlencoded",
			success:function(data){
				alert(data);
			},
			error: function(){
				alert("test2 error");
			}
		});
	});
	$("#test3btn").click(function () {
		$.ajax({
			type:"post",
			url:path+"/user1/test3.do",
			data : {
				"username" : "小明",
				"password" : "123456"
			},
			contentType : "application/x-www-form-urlencoded",
			success:function(data){
				alert(data);
			},
			error: function(){
				alert("test3 error");
			}
		});
	});
	$("#test4btn").click(function () {
		var test4Data=[1,2,3];
		var test4_json_data = JSON.stringify(test4Data);
		$.ajax({
			type:"post",//只能是post
			url:path+"/user1/test4.do",
			data : test4_json_data,
			contentType : "application/json",
			success:function(data){
				alert(data);
			},
			error: function(){
				alert("test4 error");
			}
		});
	});
	$("#test5btn").click(function () {
		var test5Data=['哈1','哈2','哈3'];
		$.ajax({
			type:"post",//或get
			url:path+"/user1/test5.do",
			data : {"datas" : test5Data},//或{"datas[]" : test5Data},推荐带上[],controller的@RequestParam不能省略[]
			success:function(data){
				alert(data);
			},
			error: function(){
				alert("test5 error");
			}
		});
	});
	$("#test6btn").click(function () {
		var test6Data=[1,2,3,3,3,3];
		$.ajax({
			type:"post",//或get
			url:path+"/user1/test6.do",
			data : {"datas[]" : test6Data.join()},//join不带参数则以,作为分隔符，防止数组为空时出错
			success:function(data){
				alert(data);
			},
			error: function(){
				alert("test6 error");
			}
		});
	});
	$("#test7btn").click(function () {
		/*
		var namevalue = "小明",passvalue = "123456";
		var test7Data = '{"name" : "'+namevalue+'" ,'+
			 ' "pass" : "'+passvalue+'"}';
		 */
		var value1 = 1,value2 = 2;
		var test7Data = '{"key1" : '+value1+' ,'+
			' "key2" : '+value2+'}';
		$.ajax({
			type:"post",//或get
			url:path+"/user1/test7.do",
			contentType : 'application/json',
			data : test7Data,
			success:function(data){
				alert(data);
			},
			error: function(){
				alert("test7 error");
			}
		});
	});
	$("#testdemobtn").click(function () {
		var messagedata = '你好';
		var user1data = {
			'id' : 1,
			'username' : '小明',
			'password' : '123456'
		};
		var user2sdata = [
			{
				'sex' : '男'
			},
			{
				'sex' : '女'
			}
		];
		var stringListdata = ['哈1','哈2','哈3'];
		var stringArraydata = ['哈1','哈2','哈3'];
		var stringArraydata = ['哈1','哈2','哈3'];
		var integerSetdata = [1,1,2,2,3,3,4];
		var mapdata = '{"我是key1" : "我是value1" , ' +
			' "我是key2" : "我是value2" ,' +
			' "我是key3" : "我是value3"}'
		var data = {
			'message' : messagedata,
			'user1' : user1data,
			'user2s' : user2sdata,
			'stringList' : stringListdata,
			'stringArray' : stringArraydata,
			'integerSet' : integerSetdata,
			'map' : mapdata
		};
		$.ajax({
			type : 'post',//或get
			url : path + '/user1/testdemo.do',
			contentType : 'application/json;charset=UTF-8',
			data : JSON.stringify(data),
			success:function(data){
				alert(data);
			},
			error: function(){
				alert("testdemo error");
			}
		});
	});
})

/*
window.operateEvents={
	"click #editBtn": function (e, value, row, index) {
		$.ajax({
			type:"post",
			url:path+"/user1/edit.do",
			data : {"id" : row.id},
			dataType : "json",
			contentType : "application/x-www-form-urlencoded",
			success:function(data){
				$("#myformedit_id").attr("value",data.id);
				$("#myformedit_username").attr("value",data.username);
				$("#myformedit_password").attr("value",data.password);
			},
			error: function(){
				alert("error");
			}
		});
		$("#editsubmit").click(function () {
			$.ajax({
				type:"post",
				url:path+"/user1/update.do",
				data : $("#myformedit").serialize(),
				contentType : "application/x-www-form-urlencoded",
				success:function(data){
					$("#dataTable").bootstrapTable("refresh");
					alert("update success");
				},
				error: function(){
					alert("update error");
				}
			});
		});
	}
}

//ajax的dataType尽量别用，就在bootstraptable里用一下
$(function() {
	initTable();
	$("#addBtn").click(function () {
		$("#addsubmit").click(function () {
			$.ajax({
				type:"post",
				url:path+"/user1/add.do",
				data : $("#myformadd").serialize(),
				contentType : "application/x-www-form-urlencoded",
				success:function(data){
					$("#dataTable").bootstrapTable("refresh");
					alert("add success");
				},
				error: function(){
					alert("add error");
				}
			});
		});
	});
	$("#delOneBtn").click(function () {
		var rows = $("#dataTable").bootstrapTable('getSelections');
		var id;
		if (rows.length == 0){
			alert("必须选择数据");
			return;
		}
		if (rows.length >= 2){
			alert("只能选择一条删除");
			return;
		}
		else {
			id = rows[0]["id"];
		}
		//alert(id);
		$.ajax({
			type:"post",
			url:path+"/user1/delone.do",
			data : {"id" : id},
			contentType : "application/x-www-form-urlencoded",
			success:function(data){
				$("#dataTable").bootstrapTable("refresh");
				alert("delone success");
			},
			error: function(){
				alert("delone error");
			}
		});
	});
	$("#delManyBtn").click(function () {
		var rows = $("#dataTable").bootstrapTable('getSelections');
		var ids = [];
		if (rows.length == 0){
			alert("请至少选择一条要删除的记录!");
			return;
		}
		else {
			$(rows).each(function () {
				ids.push(this.id);
			});
		}
		$.ajax({
			type:"post",
			url:path+"/user1/delmany.do",
			contentType : "application/json;charset=UTF-8",
			data : JSON.stringify(ids),
			success:function(data){
				$("#dataTable").bootstrapTable("refresh");
				alert("delmany success");
			},
			error: function(){
				alert("delmany error");
			}
		});
	});
});
var tablecolumns=[
	{
		checkbox: true
	},
	{
		field : "id",
		title : "主键",
		align : "center"
	},
	{
		field : "username",
		title : "姓名",
		align : "center"
		
	},
	{
		field : "password",
		title : "密码",
		align : "center"
		
	},
	{
		field : "operate",
		title : "操作",
		align : "center",
		events : operateEvents,
		formatter : addFunctionalty
	}
	
];
function initTable(){
	$("#dataTable").bootstrapTable('destroy');//清空表的内容
	//生成新表
	$("#dataTable").bootstrapTable({
		url: path+"/user1/findAll.do",  //请求后台的URL
		method: "post", 					//请求方式
		contentType : "application/x-www-form-urlencoded",//处理post请求
		//toolbar: '#toolbar',              //工具按钮用哪个容器
		striped: true,						//是否显示行间隔色
		cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
		pagination: true,                   //是否显示分页（*）
		//sortable: true,                   //是否启用排序,也可以单独加在字段上面
		sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
		pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
		pageSize: 10,                     	//每页的记录行数（*）
		pageList: [5, 10, 20, 50],        	//可供选择的每页的行数（*）
		search: true,                      	//是否显示表格搜索
		strictSearch: true,					//设置为 true启用全匹配搜索，否则为模糊搜索。
		showColumns: true,                  //是否显示所有的列（选择显示的列）
		showRefresh: true,                  //是否显示刷新按钮
		minimumCountColumns: 2,             //最少允许的列数
		clickToSelect: true,                //是否启用点击选中行
		//height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
		uniqueId: "id",             //每一行的唯一标识，一般为主键列
		showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
		cardView: false,                    //是否显示详细视图
		detailView: false,                  //是否显示父子表
		columns: tablecolumns				//引入定义的列
	});
}
function addFunctionalty(value, row, index){
	return [
		"<button id = 'editBtn' class = 'btn btn-primary btn-lg' data-toggle='modal' data-target='#myEditFormModal'>编辑</button>"
	].join("");
}

 */

添加注释的为bootstraptable的简单实现，有兴趣的也可以研究一下，不难。

jsp的就比较简单了，添加几个按钮就行了，自己实现。

User1.java

package entity;

import lombok.Data;
@Data
public class User1 {
    private Integer id;
    private String username;
    private String password;
}

User2.java

package entity;

import lombok.Data;

@Data
public class User2 {
    private String sex;
}

Account.java

package entity;

import lombok.Data;

import java.util.List;
import java.util.Map;
import java.util.Set;

@Data
public class Account {
    private String message;
    private User1 user1;
    private List<User2> user2s;
    private List<String> stringList;
    private String[] stringArray;
    private Set<Integer> integerSet;
}

简单总结

除了map参数，别的都没必要将前端需要传输的数据转化为json形式并传输到controller层

如果传输map数据，那就只能传输一个map数据，不能携带别的数据；除非将map数据封装到一个对象中

可以将多种类型的数据封装到对象中传输(map除外)

基本就这样吧，有不懂的可以问我，算是总结的比较全了。

幻影ing
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
controller向ajax传值问题+spring MVC
IT_xiaocao的博客
01-07 2082
@responsebody表示该方法的返回结果直接写入HTTP response body中 一般在异步获取数据时使用，在使用@RequestMapping后，返回值通常解析为跳转路径，加上@responsebody后返回结果不会被解析为跳转路径，而是直接写入HTTP response body中。比如异步获取json数据，加上@responsebody后，会直接返回json数据。 控制层通过
jquery ajax向spring mvc controller中传值并接受及解析返回值
princeLLM的博客
03-18 2337
第一种传值： controller中是几个单独的基本类型参数 spring MVC-controller [java] view plain copy   @RequestMapping("update")   @ResponseBody//此注解不能省略 否则ajax无法接受返回值   public Map update(Long num, 
【转载】Ajax与Controller数据交互
f789456x的博客
01-07 476
转自：https://www.cnblogs.com/kasi/p/8443289.html 1.概念 在ssm框架下实现Ajax与Controller之间各种类型数据的数据交互,从Ajax传值和Controller返回值两个方面理解 1.1 从Ajax → Controller 无论Ajax以什么形式发送数据,在Controller中的接收方法都没有差异 对象 操作 key/value类型 JSON 序列化表单 Ajax 发送 data:“name=”+name data:{“name”:name} da
Ajax与Controller数据交互
dianzhuxian2030的博客
02-11 1460
1.概念 在ssm框架下实现Ajax与Controller之间各种类型数据的数据交互,从Ajax传值和Controller返回值两个方面理解 1.1 从Ajax → Controller 无论Ajax以什么形式发送数据,在Controller中的接收方法都没有差异 对象操作key/value类型JSON序列化表单Ajax发送data:"name="+nam...
通过Jquery实现Ajax传值.rar
05-04
本示例“通过Jquery实现Ajax传值.rar”着重讲解如何在MVC（Model-View-Controller）架构中利用jQuery的Ajax功能来传递数据，避免了传统表单提交带来的页面刷新问题。 首先，理解MVC模式是至关重要的。MVC是一种软件...
再谈Jquery Ajax方法传递到action(补充)
12-11
之前写过一篇文章Jquery Ajax方法传值到action，本文是对该文的补充假设 controller中的方法是如下： 代码如下:public ActionResult ReadPerson(PersonModel model) { string s = model.ToString(); return ...
ajax请求传值Struts2+jsp
10-09
1. **创建AJAX请求**：使用JavaScript的`XMLHttpRequest`对象或者更高级的jQuery库中的`$.ajax()`方法发起异步请求。 2. **发送数据**：在请求中，可以通过`data`参数发送键值对数据。 3. **接收响应**：在请求成功...
c# json传值实例 完整sln解决方案
02-27
总结一下，这个“c# json传值实例 完整sln解决方案”涵盖了C#中JSON序列化和反序列化的方法，以及如何利用ASP.NET和AJAX实现前后端间的数据交互。通过这个实例，开发者可以学习到如何在实际项目中有效地使用这些技术...
jquery传值例子
03-21
总结来说，jQuery与服务器间的通信是通过Ajax实现的，这使得页面无需刷新即可与服务器交换数据。在JSP和Action之间，jQuery通过`$.ajax()`方法收集和发送数据，而服务器端Action则负责处理这些数据并返回结果。这个...
controller获取ajax传过来的值,ajax传值给controller,controller提取传过来的值?
weixin_35835018的博客
08-05 785
问题描述我想在页面上写AJAX,将一个input中的值传给controller中的action，并且取出调用，请大家指点下问题出现的环境背景及自己尝试过哪些方法相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码)$(function () {$.ajax({type: 'post',url: '/CustomsInspections/GetData',dataType: "json",//c...
ajax与controller之间传输数据
qq_36470898的博客
08-08 2401
最近在学习ajax，顺便记录一下。本篇记录是ajax与controller之间传输数据。 首先实现后端给前端传输json数据。如下图： controller @RequestMapping("/ExamLessonlist") @ResponseBody // 用于转换对象为json public List<ExamLesson> list(){ ...
ajax传递数组到controller
01-17 3047
使用ajax传递数组数据到controller：Web:$.ajax({ url: '/example', type: 'POST', data: {arrays: [1, 2, ..., n]}, success: function(data){ console.debug(data); } })Java:@ResponseBody @Get
ajax往后台传递参数,ajax向后台 controller传递参数
weixin_39671467的博客
08-05 412
function saveReportData(fileName,fileID) {console.log("fileName="+fileName);$.ajax({type : 'post',url : '${ctx}/reportmanage/specialReportManage/saveReportData',data:{'srFileName':fileName,"srFileID":...
Ajax向cntroller传值，传值方式以及数据类型的对照
我的博客
10-26 448
ajax向controller传值 //向后台发送处理数据 //contentType: 告诉服务器，我要发什么类型的数据 // dataType：告诉服务器，我要想什么类型的数据，如果没有指定，那么会自动推断是返回 XML，还是JSON，还是script，还是String。 常见contentType - 常见的媒体格式类型如下： text/html ： HTML格式 ...
SpringMVC学习笔记：Ajax与Controller的参数交互
Haiwi-Song
06-06 1万+
在SpringMVC的开发中，前端和后端的开发是必须掌握的知识点，无论是form提交还是Ajax提交，梳理好相关知识，在开发过程中将游刃有余。本博文旨在整理归纳，以备查用。
postman传递list参数给Springboot的controller
热门推荐
maoyeqiu的专栏
03-28 3万+
post在raw中选择，传递json格式的数据，数据格式，如下： [ { "tagName": "Bill" }, { "tagName": "George" }, { "tagName": "Thomas" } ] Sprin
jquery ajax请求 springmvc controller的 例子。
fghfghhgjgj的博客
03-31 1577
前端代码： //当 username 输入框的输入改变的时候，获取数值，查询数据库中是否已经存在 $("#username").change(function () { var targetUrl ='http://localhost/check_username.do'; console.log("请求地址是：" + targetUrl) $.ajax({
Spring Boot Jquery ajax传送JsonArray到Controller接受并转成实体List
qq_38292235的博客
10-22 540
前台Jquery： var userFlowArr = [] for (var index in rows) { var userFlowPOJO = {} /... 这里是将数据封装成JsonArray,不再赘述 .../ userFlowArr.push(userFlowPOJO) } ...
jquery ajax向后端传值
最新发布
05-13
可以通过以下步骤使用 jQuery AJAX 向后端传值： 1. 引入 jQuery 库： ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"> ``` 2. 编写 AJAX 请求： ```javascript $.ajax({...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值