使用ajax向服务端发送Form中的数据
前端代码:
<form action="" id="myFormUpdate">
<p>宠物名称: <input type="text" name="pName"></p>
<p>
宠物类型:
<select name="cId">
<c:forEach items="${type}" var="ty">
<option value="${ty.cId}">${ty.cName}</option>
</c:forEach>
</select>
</p>
<p>
宠物标签:
<select name="tId">
<c:forEach items="${tags}" var="tag">
<option value="${tag.tId}">${tag.tName}</option>
</c:forEach>
</select>
</p>
<p>
当前状态:
<select name="status">
<option value="available">available</option>
<option value="pending">pending</option>
<option value="sold">sold</option>
</select>
</p>
<input type="hidden" name="photoUrls"/>
</form>
js代码:
var formData = $("#myFormUpdate").serializeArray();//将表单数据序列化成数组
var data = {};//一个空的对象
for (var i = 0; i < formData.length; i++) {
data[formData[i].name] = formData[i]['value']//形成键值对应
}
$.ajax({
type: "post",//请求方式
url: "/pet/update",//请求服务器地址
contentType: "application/json",//设置将要传输内容的编码类型
data:JSON.stringify(data),//经过序列化的对象
success: function (data) {//完成时的事件
alert(data.msg);
},
error: function (error) {//出现错误时的事件
alert("出现异常。");
}
});
服务端代码:
@RequestMapping(path = "/update",method = RequestMethod.POST)
@ResponseBody
public String update(@RequestBody Pet pet){ //Pet是一个实体类
return "";
}
运行结果:

继续加油。 ^_^
使用ajax向服务端发送Form中的数据的更多相关文章
- aJax提交——服务端不能用request存储数据,session存数据客户端可以接收到
aJax提交与普通提交是两种迥异的提交方式,这两种提交方式决定了客户端与服务端交互时存储.传输数据的方式也不同. aJax提交,客户端的请求数据存储在data中,服务端用request.getPara ...
- ajax对服务端发送请求
//兼容处理获取ajax对象 var req = ''; if (window.XMLHttpRequest) req = new XMLHttpRequest(); else req = ...
- (四)XML基础(客户端和服务端发送与接收xml数据)
案例: index.jsp <%@ page language="java" import="java.util.*" pageEncoding=&quo ...
- Query通过Ajax向PHP服务端发送请求并返回JSON数据
Query通过Ajax向PHP服务端发送请求并返回JSON数据 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuer ...
- jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
SON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教 ...
- Diango之通过form表单向服务端发送数据
通过form表单向服务端发送数据 表单元素 表单:form></form>表单用于向服务器传输数据.另外一种向服务端传输数据的方式为ajax. form属性: action:提交表单 ...
- Ajax轮询——“定时的通过Ajax查询服务端”
Ajax轮询——"定时的通过Ajax查询服务端". 概念: 轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 百闻 ...
- Ajax轮询——定时的通过Ajax查询服务端
概念:轮询(polling):客户端按规定时间定时向服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. test.html //前端代码 <html> <h ...
- 利用laravel-echo主动向服务端发送消息,实现在线状态管理
之前在网上翻了半天,也没有找到关于如何 通过laravel-echo主动发送消息 和 在laravel-websockets中自定义控制器 的文章或教程.无奈之下只能翻laravel-echo和lar ...
随机推荐
- windows使用放大镜快速放大屏幕局部
Win10系统自带放大镜有时真的是比较难使用的,但是如果你对他的快捷键有所了解之后就会感觉它其实也没有那么难,用户可以在使用完之后直接按快捷键将其关闭,一起看看吧. Win10系统放大镜快速关闭快捷键 ...
- 【POJ - 3009】Curling 2.0 (dfs+回溯)
-->Curling 2.0 直接上中文 Descriptions: 今年的奥运会之后,在行星mm-21上冰壶越来越受欢迎.但是规则和我们的有点不同.这个游戏是在一个冰游戏板上玩的,上面有一个正 ...
- python基础--合并两个列表
a = [1,2,3] b = [4,5,6] # 将两个列表合并 # append方法是不行的 # a.append(b) # print(a) # [1, 2, 3, [4, 5, 6]] # 我 ...
- teach-es6
ES6: ECMAScript6 js: 组成部分: ECMA DOM BOM ECMA是“European Computer Manufactures Association”的缩写,中文称欧洲计算 ...
- redhat 7 防火墙配置
没有iptables 用systemctl stop firewalld
- 学习shell的第一天
1.命令历史 作用:查之前使用的命令 关于命令历史的文件 每个用户家目录下面的 .bash_history 在关机的时候,会自动写入一次 (history -a 将内存中的命令历史写入文件) ...
- git 添加本地项目到远程仓库 记录一下命令
1.初始化 git init 2.关联远程仓库 git remote add origin 你的仓库地址 3.加入到本地仓库 git add * 4.推送(强推).如果不想强推 ,可以先执行下 git ...
- Oracle-DDL 2- 视图&索引
DDL-数据定义语句: 二.视图 --视图(view),本身不保存数据,保存的是一个查询语句--对视图的操作等同于对查询语句中源数据的操作--视图占用存储空间较小,可以快速的对特定数据进行访问和操作- ...
- 2018.08.10【省赛&提高A组模拟】比赛总结
题解 这次题目可真是太难了! 糟糕的运气使我AK的步伐寸步难行(士气严重下降). T1 这题还是比较水的(尽管我比赛时只拿了50分) 一些大佬们说:这题只是一道简单的暴力题,枚举l+二分r 就可以了. ...
- FluentValidation在C# WPF中的应用
原文:FluentValidation在C# WPF中的应用 一.简介 介绍FluentValidation的文章不少,零度编程的介绍我引用下:FluentValidation 是一个基于 .NET ...