javascript~提交表单的方式

一般来说我常用到两种方式:

1.表单提交

表单get提交参数会以 ?name=***&password=*** 这种形式拼接到url中传递到后台。

表单post提交参数会将参数封装到请求体中传递到后台。

我们考虑这样一个问题,分别用get和post发送请求时,如果在url上拼接请求参数,

例如/**/**?name=***那么后台是否能接受到name参数?

答:get方式拼接请求参数到url上参数传递不到后台。因为get是把参数数据队列加到提交表单的action属性所指的url中,值和表单内各个字段一一对应,在url中可以看到,所以你可能以为是这样传值的实则不然。

<form action="${pageContext.request.contextPath }/myServlet?name=lz" method="GET"> <input type="text" name="password"/> <input type="submit" value="提交"/> </form>

重点在于?号后面的name参数,我想当然的以为password的值会最加到后面,就如:

http://localhost:8888/11/myServlet?name=lz&password=123

但是事实上,真正的URL为:

http://localhost:8888/11/myServlet?password=123

post方式拼接请求参数到url上参数可以传递到后台。

将method改为POST之后,再次提交,可以发现提交的URL:

http://localhost:8888/11/myServlet?name=lz

而password参数封装在请求体中传给后台,所以后台既可以得到name的值,也可以得到password的值,都没有问题。

2.Ajax传递

ajax传递参数data可以设置哪些类型。

<1>文本:"uname=alice&mobileIpt=110&birthday=1983-05-12"

1.serialize()方法

  用法:var data = $("form").serialize();

  功能:将表单内容序列化成一个字符串。

结构:"uname=alice&mobileIpt=110&birthday=1983-05-12"

2.serializeArray()方法

  用法:var jsonData = $("form").serializeArray();

  功能:将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。

  结构:

[

{"name":"uname","value":""},

{"name":"mobileIpt","value":""},

{"name":"birthday","value":""}

]

很明显这样的数据结构不符合第一种方式。所以配合使用JQuery.param()方法处理一下:

用法:var arr = $('#addForm').serializeArray(); $.param(arr);

功能:将表单元素数组或者对象序列化。

结构:"uname=alice&mobileIpt=110&birthday=1983-05-12"

<2>json对象 JSON.stringify(js对象)

<3>json数组

<4>json字符串 相当于json对象的String形式

注意:当传过去的数据是json类型时,ajax添加contentType: 'application/json;charset=utf-8',

后台接受参数添加@requestBody注解

<5>FormData对象,它可以更灵活方便的发送表单数据,因为可以独立于表单使用。

获取表单js对象,将js对象作为参数生成var ?? = new FormData(js对象);将??作为ajax的data。

var fd = new FormData(document.querySelector("form")); fd.append("CustomField", "This is some extra data"); $.ajax({ url: "stash.php", type: "POST", data: fd, processData: false, // 不处理数据 contentType: false // 不设置内容类型 });

猜你喜欢

转载自blog.csdn.net/zf18234031156/article/details/89399971
今日推荐