首先定义一个form表单:

 <form id="login" >
<input name="user" type="text"/>
<input name="sex" type="radio" value="man"/>
<input name="sex" type="radio" value="woman"/>
<input type="checkbox" name="interest" value="piu">PIU
<input type="checkbox" name="interest" value="dss">DSS
<input type="checkbox" name="interest" value="ddr">DDR<br>
<input type="button" name="submit" value="submit" οnclick="getFormInfo();">
</form> <script type="text/javascript" src="./../js/jquery.min.js"></script>

  实现Ajax提交数据进行请求,其中data属性设置传参的方法有好几种形式,如下:

//第一种写法(把参数拼接在URL中,data属性设为空{ })
function getFormInfo(){
var name='wen';
var user='chen';
$.ajax({
url: "/login/authenticate?name="+name+"&user="+user,
type: "POST",
data:{},
dataType: "json",
success: function(data){ },
error:function(err){
console.log(err.statusText);
console.log('异常');
}
});
}

  

//第二种写法(参数写成json数据形式)
function getFormInfo(){
$.ajax({
url: "http://192.168.10.32:6833/login/authenticate",
type: "POST",
data:{
name:'chem',
user:'wen'
},
cache:false,
dataType: "json",
success: function(data){ },
error:function(err){
}
});
}

  第三种写法(根据表单id属性,把表单封装数据,调用JQuery的serialize()方法序列化为字符串)
 前提是:发送请求的必须是一个form表单,而且表单内要做参数的标签必须具有name属性,因为name属性会被认为请求参数名

//代码如下
function getFormInfo(){
var params=$('#login').serialize(); //把id为login的form表单里的参数自动封装为参数传递
console.log(params);
$.ajax({
url: "http://192.168.10.32:6833/login/authenticate",
type: "POST",
data:params,
cache:false,
dataType: "json",
success: function(data){ },
error:function(err){ }
});
}

  

//第四种写法(拼接data)
function getFormInfo(){
var name='chen';
var user='wen';
$.ajax({
url: "http://192.168.10.32:6833/login/authenticate",
type: "POST",
data:'name='+name+'&user='+user,
cache:false,
dataType: "json",
success: function(data){ },
error:function(err){ }
});
}

 

   //前四种的controller
@RequestMapping(value = "authenticate",method = RequestMethod.POST)
public String update(Book book){
System.out.println(book);
return "success";
}

 --------------------------------------------------分割线----------------------------------------------还有几种形式:
 需要引入:<script type="text/javascript" src="serializeJSON.js"></script>

//第五种写法(表单序列化为json数据)
function getFormInfo(){
var params=$('#login').serializeJSON();
console.log(params);
$.ajax({
url: "http://192.168.10.32:6833/login/authenticate",
type: "POST",
data:params,
cache:false,
dataType: "json",
success: function(data){ },
error:function(err){ }
});
}

  

//第六种写法(既有全部直接获取表单中的数据又有单独出来的数据)
function getFormInfo(){
var params=$('#login').serializeJSON();
console.log(params);
params.height='20';
$.ajax({
url: "http://192.168.10.32:6833/login/authenticate",
type: "POST",
data:params,
cache:false,
dataType: "json",
success: function(data){ },
error:function(err){ }
});
}

表单序列化插件serializeJSON.js下载及使用示例

原文地址

Ajax请求($.ajax()为例)中data属性传参数的形式的更多相关文章

  1. Tomcat应用中post方式传参数长度限制

    Tomcat应用中post方式传参数长度限制 jsp页面上是没有限制的,但是在tomcat服务器上有限制,Tomcat 默认的post参数的最大大小为2M, 当超过时将会出错,可以配置maxPostS ...

  2. bootstrapValidator验证的remote中data属性里获取select一直是默认值

    budgetEditionNo:{ message:'版本号输入不正确' , validators:{ notEmpty:{ message:'版本号不能为空,请填写' } , remote:{ ur ...

  3. 用jQuery.ajaxWebService请求WebMethod,Ajax处理实现局部刷新;及Jquery传参数,并跳转页面 用post传过长参数

    首先在aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性. 如: [WebMethod]  public static string GetUserName()   {  //. ...

  4. Struts2中通过超链接传参数要注意的问题

    写到分页的功能,在传递页码pageNo的时候遇到了参数接收不正确的问题,我本来在action中是定义了一个pageNo字符串参数和一个Page类参数,Page是一个封装了页面要显示的数据集合和页面信息 ...

  5. Liferay中利用URL传参数

    业务场景:现在有一个新闻系统,有两个页面,A是新闻列表页面/web/guest/home,B是新闻的详情页面/web/guest/newsview. 业务逻辑为:在A页面中,点击新闻的标题进入B页面, ...

  6. jquery ajax中data属性详解

    $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , ...

  7. Python requests.post方法中data与json参数区别

    在通过requests.post()进行POST请求时,传入报文的参数有两个,一个是data,一个是json. data与json既可以是str类型,也可以是dict类型. 区别: 1.不管json是 ...

  8. Python Requests post方法中data与json参数问题

    1.data参数 你想要发送一些编码为表单形式的数据——非常像一个 HTML 表单.要实现这个,只需简单地传递一个字典给 data 参数.你的数据字典在发出请求时会自动编码为表单形式,header默认 ...

  9. asp.net中的mysql传参数MySqlParameter

    注意在asp.net中传参 string sql="select name,id from user where id=@id"; //@idm不需要引号 MySqlParamet ...

随机推荐

  1. PTA二叉搜索树的操作集 (30分)

    PTA二叉搜索树的操作集 (30分) 本题要求实现给定二叉搜索树的5种常用操作. 函数接口定义: BinTree Insert( BinTree BST, ElementType X ); BinTr ...

  2. 日志框架-logtube

    Logtube 是什么 logtube 框架是基于 slf4j的一个日志框架封装, 源码地址: https://github.com/logtube 基于 SLF4J框架, 扩展了日志输出格式 (兼容 ...

  3. 暑假算法练习Day1

    为了加强个人的算法能力,所以准备每天都做适当的算法练习,并在隔天加以回顾. 依托PTA.Leetcode平台进行训练(暂定每天三题C++,对于Leetcode平台上的练习,由于其解题需以类的形式进行提 ...

  4. Effective C++ 总结笔记(三)

    三.资源管理 13.以对象管理资源 1.为了防止资源泄漏,请使用RAII对象,在构造函数里面获得资源,并在析构函数里面释放资源. 2. 引用计数型智慧指针(RCSP):持续追踪多少个指针指向该资源,无 ...

  5. Python基础(range)

    arr = [1,2,3,4,5,6,7,8,9] for i in range(0,len(arr),2): print(arr[i],end=' | ') brr = arr[0:len(arr) ...

  6. Django 小实例S1 简易学生选课管理系统 7 修改个人信息

    Django 小实例S1 简易学生选课管理系统 第7节--修改个人信息 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 用户模块除了注册登录之外,还 ...

  7. 那一天,我被Redis主从架构支配的恐惧

    面试官:要不你来讲讲你最近在看的点呗?可以拉出来一起讨论下(今天我也不知道要问什么) 候选者:最近在看「Redis」相关的内容 面试官:嗯,我记得已经问过Redis的基础和持久化了 面试官:要不你来讲 ...

  8. [cf587D]Duff in Mafia

    二分最大边权,即有些边强制不能被选 接下来,即任意一点上某两边不能同时被选,以及任意一点上颜色相同的两边必须被选择一条 这些限制都可以用2-sat的形式来描述(强制不能选即连边"选-> ...

  9. [luogu1390]公约数的和

    1 #include<bits/stdc++.h> 2 using namespace std; 3 #define N 2000005 4 long long n,ans,f[N],vi ...

  10. DirectX12 3D 游戏开发与实战第七章内容(上)

    利用Direct3D绘制几何体(续) 学习目标 学会一种无须每帧都要刷新命令队列的渲染流程,以此来优化性能 了解另外两种根签名参数类型:根常量和根描述符 探索如何在程序中生成和绘制常见的几何体:如栅格 ...