JQuery Ajax 向后台传参方式

欢迎光临我的博客[http://poetize.cn],前端使用Vue2,聊天室使用Vue3,后台使用Spring Boot

在jquery的ajax函数中,可以传入3种类型的数据

  1. 文本:"uname=alice&mobileIpt=110&birthday=1983-05-12"
  2. json对象:{"uanme":"vic","mobileIpt":110,"birthday":"2013-11-11"}
  3. json数组:
[
    {"name":"uname","value":"alice"},
    {"name":"mobileIpt","value":110},   
    {"name":"birthday","value":"2012-11-11"}
]
  1. FormData对象:
它可以更灵活方便的发送表单数据,因为可以独立于表单使用,实现表单数据的序列化。
最大的好处是可以通过Ajax上传文件。如果它的字段类型不是Blob也不是File,则会被转换成字符串。
通过这种方式,可以非常方便的进行表单提交,直接表单转换成FormData对象即可。

  var fd = new FormData(document.querySelector("form"));
  data: fd,
  processData: false,  // 不处理数据
  contentType: false   // 不设置内容类型

第一种写法(把参数拼接在URL中,data属性设为空{ })

var id = "a";
var name = "语文";

url:"/sell/login?id="+id+"&name="+name,
data:{},

第二种写法(参数写成json数据形式)

         data:{
            'name':'ld',
            'user':'littledonkey'
         },

第三种写法(根据表单id属性,把表单封装数据,调用JQuery的serialize()方法序列化为字符串)

前提是:发送请求的必须是一个form表单,而且表单内要做参数的标签必须具有name属性,因为name属性会被认为请求参数名
var params=$('#login').serialize();     //把id为login的form表单里的参数自动封装为参数传递
data:params,
    作用:序列表单内容为字符串。
    参数: 无
    返回值:表单内容的字符串格式

serialize方法可以将表单序列化成一个拼接的字符串形式:
username=a&address=b&age=c


serializeArray方法可以将表单序列化成一个特殊的json数组,带有name和value的json:

返回值:返回的是JSON数组而非JSON字符串,返回格式为:
   [ 
     {name: 'firstname', value: 'Hello'}, 
     {name: 'lastname', value: 'World'},
     {name: 'alias'}
  ]

优化:
第一种方法:

    $.param(data);    //将表单元素数组或者对象序列化。
    name=alice&mobileIpt=110&birthday=1983-05-12

    如果被传递的对象在数组中,则必须是以 .serializeArray() 的返回值为格式的对象数组:

    [
        {name:"first",age:"12"},
        {name:"last",age:"11"},
        {name:"job",age:"5"}
    ]

第二种方法:

数组转换成对象:
  var data ={};
  $("form").serializeArray().map(function(val){
      data[val.name]=val.value;
  });

对象转换成json字符串:
var myJSON =  JSON.stringify(data );

{"name": "first", "age": "12"}

第四种写法(拼接data)

var id = "a";
var name = "语文";

//data: "id=" + id + "&name=" + $("#name").val(),
data: "id=" + id + "&name=" + name,
posted @ 2019-08-14 20:26  LittleDonkey  阅读(2602)  评论(0编辑  收藏  举报