前端代码:

        <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. CodeForces 1249A --- Yet Another Dividing into Teams

    [CodeForces 1249A --- Yet Another Dividing into Teams] Description You are a coach of a group consis ...

  2. 【Python开发】urllib2异常处理

    一.urllib2模块回顾 urllib2模块中最重要的函数是urlopen()函数,用于获取URLs资源(Uniform Resorce Locators).urlopen函数不仅可以用于简单的情况 ...

  3. (5.5)mysql高可用系列——MySQL半同步复制(实践)

    关键词,mysql半同步复制 [0]实验环境 操作系统:CentOS linux 7.5 数据库版本:5.7.24 数据库架构:主从复制,主库用于生产,从库用于数据容灾和主库备机,采用默认传统的异步复 ...

  4. hdfs基本文件操作

    编程实现下列要求: 1.创建一个自己姓名首字母的文件夹 2.在文件夹下创建一个hdfstext1.txt文件,项文件内输入“班级学号姓名HDFS课堂测试”的文字内容: 3.在文件夹下在创建一个好的fs ...

  5. ADG环境搭建

    一:实验环境介绍PC机系统: CentOS 6.5(64位)数据库版本: Oracle 11gR2 11.2.0.4 (64位)IP地址规划:主数据库10.110.9.41 SID:orapridb_ ...

  6. 洛谷 P3370 【模板】字符串哈希 (set||map||哈希||字典树(mle)

    P3370 [模板]字符串哈希 题目描述 如题,给定N个字符串(第i个字符串长度为Mi,字符串内包含数字.大小写字母,大小写敏感),请求出N个字符串中共有多少个不同的字符串. #友情提醒:如果真的想好 ...

  7. C++学习 之 控制程序流程 (笔记)

    1.使用if...else有条件的执行 在一些时候语句需要进行有条件的执行.比如如果输入"Y"就执行赋值语句N=1:否则N=0: #include<iostream> ...

  8. linux 三剑客之sed常用总结

    sed 列出5-7行 [root@www ~]# nl /etc/passwd | sed -n '5,7p' -n不在处理前打印,搜索root,/p打印 nl /etc/passwd | sed ' ...

  9. 关于redis的几件小事(二)redis线程模型

    1.memcached和redis有什么区别? (1)Redis支持服务器端的数据操作 redis和memcached相比,redis拥有更多的 数据结构并且支持更丰富的数据操作 ,通常在memcac ...

  10. 04 Redis主从同步

    redis主从同步 原理:1. 从服务器向主服务器发送 SYNC 命令.2. 接到 SYNC 命令的主服务器会调用BGSAVE 命令,创建一个 RDB 文件,并使用缓冲区记录接下来执行的所有写命令.3 ...