前端代码:

        <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中的数据的更多相关文章

  1. aJax提交——服务端不能用request存储数据,session存数据客户端可以接收到

    aJax提交与普通提交是两种迥异的提交方式,这两种提交方式决定了客户端与服务端交互时存储.传输数据的方式也不同. aJax提交,客户端的请求数据存储在data中,服务端用request.getPara ...

  2. ajax对服务端发送请求

    //兼容处理获取ajax对象 var req = ''; if (window.XMLHttpRequest)    req = new XMLHttpRequest(); else    req = ...

  3. (四)XML基础(客户端和服务端发送与接收xml数据)

    案例: index.jsp <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  4. Query通过Ajax向PHP服务端发送请求并返回JSON数据

    Query通过Ajax向PHP服务端发送请求并返回JSON数据 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuer ...

  5. jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    SON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教 ...

  6. Diango之通过form表单向服务端发送数据

    通过form表单向服务端发送数据 表单元素 表单:form></form>表单用于向服务器传输数据.另外一种向服务端传输数据的方式为ajax. form属性: action:提交表单 ...

  7. Ajax轮询——“定时的通过Ajax查询服务端”

    Ajax轮询——"定时的通过Ajax查询服务端". 概念: 轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 百闻 ...

  8. Ajax轮询——定时的通过Ajax查询服务端

    概念:轮询(polling):客户端按规定时间定时向服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. test.html     //前端代码 <html> <h ...

  9. 利用laravel-echo主动向服务端发送消息,实现在线状态管理

    之前在网上翻了半天,也没有找到关于如何 通过laravel-echo主动发送消息 和 在laravel-websockets中自定义控制器 的文章或教程.无奈之下只能翻laravel-echo和lar ...

随机推荐

  1. VM虚拟机网络设置

    两台PC安装了虚拟机和XP,采用“桥接”模式,设置了两个虚拟机的地址为同网段.但发现飞Q可以联通,数据库无法连接,且ping不通. 解决: (1)将防火墙关闭. (2)通过“虚拟网络编辑器”将该网络桥 ...

  2. NativeContainer

    安全系统复制数据的过程的缺点是它还隔离了每个副本中作业的结果.要克服此限制,您需要将结果存储在一种名为NativeContainer的共享内存中. 什么是NativeContainer? A Nati ...

  3. 【Python开发】Python中的class继承

    继承是面向对象的重要特征之一,继承是两个类或者多个类之间的父子关系,子进程继承了父进程的所有公有实例变量和方法.继承实现了代码的重用.重用已经存在的数据和行为,减少代码的重新编写,python在类名后 ...

  4. 【VS开发】设备控制台 (DevCon.exe) 命令

    设备控制台 (DevCon.exe) 命令 DevCon (DevCon.exe) 是一个命令行工具,可以显示有关运行 Windows 的计算机上设备的详细信息.还可以使用 DevCon 启用.禁用. ...

  5. 2019牛客暑期多校训练营(第二场)-D Kth Minimum Clique

    题目链接:https://ac.nowcoder.com/acm/contest/882/D 题意:求给定点权无向图中,点权和第k小的完全子图的点权和.(包括空集) 思路:从空集开始,每找到一个完全子 ...

  6. 手把手教你用 Strace 诊断问题

    早些年,如果你知道有个 strace 命令,就很牛了,而现在大家基本都知道 strace 了,如果你遇到性能问题求助别人,十有八九会建议你用 strace 挂上去看看,不过当你挂上去了,看着满屏翻滚的 ...

  7. Xtrabackup innobackupex

    Xtrabackup是由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上惟一一款开源的能够对innodb和xtradb数据库进行热备的工. Xtrabackup中主要包含两个工具 ...

  8. php 内存原理

    1.内存结构: 栈区:保存变量名,对CPU,读写速度很快 堆区:保存复杂的数据结构,想对象,数组,复杂的字符串等. 数据段:数据段分为数据段全局区(简单的数据,整型和布尔类型)和数据段静态区(存储静态 ...

  9. 2019年8月23日 星期五(Workerman)

    Workerman,高性能socket服务框架 Workerman是什么? Workerman是一款纯PHP开发的开源高性能的PHP socket 服务框架. Workerman不是重复造轮子,它不是 ...

  10. 无法发布-旧项目发布时出现:该项目中不存在目标“GatherAllFilesToPublish”。

    在项目文件夹下面找到 xxxx.csproj 文件,使用 VisualStudio Code 打开(或者任意编辑器,VisualStudio 可能无法编辑) 将以下节点进行更改 <Import ...