前端代码:

        <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. CAD常用命令、快捷键和命令说明大全

    CAD常用命令.快捷键和命令说明大全 一:常用功能键 F1: 获取帮助 F2: 实现作图窗和文本窗口的切换 F3: 控制是否实现对象自动捕捉 F4: 数字化仪控制 F5: 等轴测平面切换 F6: 控制 ...

  2. 【DSP开发】【Linux开发】IIC设备驱动程序

    IIC设备是一种通过IIC总线连接的设备,由于其简单性,被广泛引用于电子系统中.在现代电子系统中,有很多的IIC设备需要进行相互之间通信 IIC总线是由PHILIPS公司开发的两线式串行总线,用于连接 ...

  3. 最大熵马尔科夫模型(MEMM)及其标签偏置问题

    定义: MEMM是这样的一个概率模型,即在给定的观察状态和前一状态的条件下,出现当前状态的概率. Ø  S表示状态的有限集合 Ø  O表示观察序列集合 Ø  Pr(s|s­­’,o):观察和状态转移概 ...

  4. flask add_url_rule的使用

    from flask import Flask,url_for #url_for 接受两个参数(endpoint,**value)endpoint没有指定就是默认的函数名,根据 view_func._ ...

  5. 配置Tomcat时退出就自动还原问题

    因为出现中文乱码问题需要配置server.xml文件,可是在每次配置完并且保存的情况下,重启服务器再看server.xml文件时,它自动还原到了未修改前的配置,后,解决如下: 第一步:打开eclips ...

  6. 从零开始,SpreadJS新人学习笔记【第5周】

    复制粘贴.单元格格式和单元格类型 本周,让我们一起来学习SpreadJS 的复制粘贴.单元格格式和单元格类型,希望我的学习笔记能够帮助你们,从零开始学习 SpreadJS,并逐步精通. 在此前的学习笔 ...

  7. java_实现一个类只能声明一个对象

    public class StaticDemo { public int a=10; private static StaticDemo s= new StaticDemo(); private St ...

  8. C++ Primer 回炉重铸(一)

    过去学C++语法都是用的这本C++Primer第五版 说实话,这本书应该是业界用的最多的一本类似于C++语法的百科全书了.. 但是感觉自己学了这么长时间的C++,语法层次还是不够牢固. 比如templ ...

  9. Java switch case 语句

    switch case 语句判断一个变量与一系列值中某个值是否相等,每个值称为一个分支. 语法 switch(expression){ case value : //语句 break; //可选 ca ...

  10. LeetCode题解: LRU Cache 缓存设计

    LeetCode题解: LRU Cache 缓存设计 2014年12月10日 08:54:16 邴越 阅读数 1101更多 分类专栏: LeetCode   版权声明:本文为博主原创文章,遵循CC 4 ...