使用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 ...
随机推荐
- PJzhang:我发现一个有两个答案的数独题
猫宁!!! 最近做数独题,发现了一个答案不唯一的数独,之前对此类数独有所耳闻,但是没有亲手发现,碰巧发现一个,很是欣喜. 下面展示了两个答案 第一个 第二个 绿色标签是答案 ...
- 【神经网络与深度学习】【C/C++】ZLIB学习
zlib(http://zlib.NET/)提供了简洁高效的In-Memory数据压缩和解压缩系列API函数,很多应用都会用到这个库,其中compress和uncompress函数是最基本也是最常用的 ...
- CentOS7修改内核启动顺序
CentOS7修改内核启动顺序: 1.首先查看当前系统有几个内核 cat /boot/grub2/grub.cfg |grep menuentry 2.查看当前默认内核 grub2-editenv ...
- sftp服务器配置
环境依赖:openssh-server >=4.8 //ssh -V 查看 安装环境: centos6,centos7 1.创建用户组 sftp groupadd sftp 2.创建登录用 ...
- 如何使用JavaScript实现前端导入和导出excel文件
一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...
- httprunner - 源码解析
这里只是做一个大概的解析,还有很多细节部分没有太过于关注 我们从cli.py开始进行解析 1.argparse.ArgumentParser 接受命令行的各种参数 [ argparse.Argumen ...
- spark教程(15)-Streaming
Spark Streaming 是一个分布式数据流处理框架,它可以近乎实时的处理流数据,它易编程,可以处理大量数据,并且能把实时数据与历史数据结合起来处理. Streaming 使得 spark 具有 ...
- docker-文件系统出错处理
Error response from daemon: error creating overlay mount to /var/lib/docker/overlay2 2018年03月17日 22: ...
- 操作系统(五)CPU调度
CPU调度是多道程序操作系统的基础.
- Java Lock的使用
+ ReentrantLock类的使用 + ReentrantReadWriteLock类的使用 1. 使用ReentrantLock类 ReentrantLock类能够实现线程之间同步互斥,并且在扩 ...