使用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 ...
随机推荐
- Django 字段更新时报错
字段更新时会报错: -------------------------------------------------------------- 无法向未定义字段添加默认值您确认添加默认值吗? 请添加 ...
- PI膜应变片试样制备
一.选取基板 1.喷涂在玻璃基板上PI膜 2.正面用记号笔标记PI膜工艺参数——转速.厚度 3.玻璃板背面为PI膜 二.贴防护膜 1.事先画好二维图,以dxf格式存放 2.裁减合适的大小,并将其贴在打 ...
- Emgu 学习(4) 使用指针访问图像内存
在原始图像最初的10行绘制一个颜色条 class Program { static void Main(String[] args) { Mat img = CvInvoke.Imread(@&quo ...
- MySQL Explain命令详解--表的读取顺序,数据读取操作的类型等
表示索引中使用的字节数,可通过该列计算查询中使用的索引的长度(key_len显示的值为索引字段的最大可能长度,并非实际使用长度,即key_len是根据表定义计算而得,不是通过表内检索出的) 不损失精确 ...
- 解决远程连不到CentOS7虚拟机或ifconfig中没有ens33
在使用Secure CRT连接虚拟机连接不上,可能之前虚拟机关闭不当 登到虚拟机的中断使用ifconfig发现没有ens33 猜测是CentOS图形管理中的NetworkManager接管了网络配置, ...
- spring配置文件拆分策略及方法
一.拆分策略 如果一个开发人员负责一个模块,我们采用公用配置(包括数据源.事务等)+每个系统模块一个单独配置文件(包括Dao.Service.Web控制器)的形式 如果是按照分层进行的分工,我们采用公 ...
- 前端html+css标签简介(可能就我自己看的懂-。-)
标签集合 # html 文字标签:修改样式 -<font></font> -属性:size:大小,范围1-7,大于7时默认7 color:颜色,英文单词或者十六进制(editp ...
- python正则表达式的介绍
re模块的使用 re.match从头匹配一个符合规则的字符串,从起始位置开始匹配,匹配成功返回一个对象,未匹配成功返回None. import re # re.match(正则表达式,要匹配的字符串) ...
- redis 学习(二)-- 通用命令
redis 学习(二)-- 通用命令 1. keys pattern 含义:查找所有符合给定模式(pattern)的key 命令 含义 keys * 遍历所有 key keys he[h-l]* 遍历 ...
- Mysql学习(三)之数据库管理工具Navicat
前言 mysql安装完后默认只有命令行工具,所以我们可以下载一些数据库管理工具Navicat Navicat使用 首先建立一个连接选择mysql,填写信息 发现多了一个localhost,双击,打开连 ...