怎么发链接

表单提交和超链接请求传递参数的⼏种⽅式

表单提交和超链接请求传递参数的⼏种⽅式

这段时间在使⽤easy-ui的datagrid，他有⾃⼰提交表单的⽅式，所以就整理整理页⾯对参数的提交⽅式：

注：下⾯代码都已经过。

提交表单

HTML提交表单简单易操作，依靠在

定提交⽅式是get还是post。

jsp代码

rvlet或者action根据name属性获取提交的参数

代码

超链接请求

只使⽤html发送超链接请求的话，⽅式⽐较单⼀。传递参数值是被写死的，并且只能使⽤get⽅式去发送请求。如果不⽤的话，超链接还是作

为⼀个页⾯跳转按钮⽐较合适。

jsp代码

java代码

ript提交表单

使⽤和html提交表单的话就可以灵活很多，因为js不仅有针对页⾯很多的触发事件，⽽且可以获取到html页⾯元素的信息。看⼀下⼏个简单

的例⼦。

3.1form表单提交前触发事件

这⾥主要是介绍下在提交form表单之前的onsubmit事件,在很早以前学习的时候，这个事件会被作为⽤户输⼊数据校验的⼊⼝。不过仍然因为

js使html页⾯的灵活性变⾼，这种前端校验⽤户输⼊的⽅式也不是那么唯⼀。

jsp代码

账号:

密码:

1

2

3

4

5

Stringurname=ameter("name_ur");

Stringpassword=ameter("name_pwd");

1

2

超链接请求1

Stringurname=ameter("name_ur");

Stringpassword=ameter("name_pwd");

1

2

代码

在test_onsubmit()函数中,可以选择进⾏任意其他操作，包括设置post还是get⽅式去提交表单，或者说获取⽤户输⼊内容，对其内容进⾏前

端校验。

java代码

3.2使⽤button或者超链接标签提交表单

使⽤button或者超链接去提交表单的话，主要是利⽤onclick触发事件去调⽤⼀个js函数，然后在函数中去进⾏表单提交。这时候就不需要

标签去提交表单了。

jsp代码

注意：a标签的href属性必须设置为#,因为a标签默认会发⽣跳转。

javascript代码

java代码

ript超链接请求

账号:

密码:

1

2

3

4

5

functiontest_onsubmit(){

alert("提交表单前先进⼊到这个js函数");

//使⽤js获取到id为test的这个表单

varfrm=mentById("test");

//设置这个表单的提交路径

="rvlet/TestServlet";

//设置这个表单提交的⽅式

="post";

//提交表单

();

}

1

2

3

4

5

6

7

8

9

10

11

Stringurname=ameter("name_ur");

Stringpassword=ameter("name_pwd");

1

2

账号:

密码:

button标签

a标签

1

2

3

4

5

6

7

8

functionsubmit_frm(){

varfrm=mentById("test");

="rvlet/TestServlet";

="post";

();

}

1

2

3

4

5

6

Stringurname=ameter("name_ur");

Stringpassword=ameter("name_pwd");

1

2

使⽤js去处理html的超链接请求时，就可以动态的设置传递参数，以及传递参数的数值。由于标签请求的提交需要on对

象，提交超链接请求仍是get⽅式。

注意：直接使⽤js，也可以将超链接请求参数提交⽅式修改为post，由于中封装的要好很多，这⾥就不记了。可以看到实现。

jsp代码

注意：a标签的href属性必须设置为#,因为a标签默认会发⽣跳转。

javascript代码

java代码

提交表单

提交表单有两种，第⼀种就是只提交表单中的内容，没有额外数据提交，这种⽐较简单。还有⼀种就是不仅提交表单的内容，⽽且增加⼀些

额外的参数与表单内容⼀起提交。

5.1只提交表单内容

jsp代码

jQuery代码

账号:

密码:

提交这两个参数的值

1

2

3

functionsubmit_a(){

//获取⽤户输⼊的值

varurname=mentById("id_ur").value;

varpassword=mentById("id_pwd").value;

//拼接url

varurl="rvlet/TestServlet?";

url+="urname="+urname+"&password="+password;

//重新定位url

on=url;

}

1

2

3

4

5

6

7

8

9

10

Stringurname=ameter("urname");

Stringpassword=ameter("password");

1

2

账号:

密码:

jQuery

1

2

3

4

5

注意：这⾥写法就很灵活，⽐如⽤bind去创建click事件，⽤其他的html标签触发事件，获取表单中的⽤户输⼊数据之类进⾏处理什么

的都可以。

java代码

5.2提交表单以及额外内容

这种提交⽅式就是所有表单提交和超链接请求中最为灵活的提交⽅式了，也是⽬前做的项⽬中最常见的页⾯提交⽅式。

jsp代码

jQuery代码

$(document).ready(function(){

//创建id为sub_jQuery的button的单击事件

$("#sub_jQuery").click(function(){

//设置表单id为test的请求路径和⽅式

$("#test").attr("action","rvlet/TestServlet");

$("#test").attr("method","post");

//提交id为test的表单

$("#test").submit();

});

});

1

2

3

4

5

6

7

8

9

10

11

12

Stringurname=ameter("name_ur");

Stringpassword=ameter("name_pwd");

1

2

账号:

密码:

p标签中的内容

A选项

B选项

C选项

jQuery

1

2

3

4

5

6

7

8

9

10

$(document).ready(function(){

//创建id为sub_jQuery的button的单击事件

$("#sub_jQuery").bind("click",function(){

//获取表单外的段落内容和checkbox复选框的选中值

varp_value=$("#id_p").html();

varcheck_value=[];

$("input[name='name_checkbox']:checked").each(function(){

check_($(this).val());

});

//将id为test的表单提交的input参数进⾏序列化

varform_value=$("#test").rialize();

//拼接提交的路径

varurl="rvlet/TestServlet";

//将表单外的提交内容拼接到路径中

url+="?url_p="+p_value+"&url_check="+check_value;

//使⽤post⽅式提交表单以及额外的参数

$.post(url,form_value);

});

});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

java代码

注意：

1.这⾥写的这个⼩例⼦中，对于表单外的参数提交是靠拼接url完成的。

2.这个checkbox主要是作为个js数组参数传递的⽰例，不同于在form表单中提交的checkbox，后台java获取数组的⽅式是：

ameterValues("param_name");

然⽽拼接成url之后，后台获取⽅式变成了字符串获取，得到的是带逗号分隔的数组字符串数值，那么后台java获取只能是：

ameter("param_name");

3.在现在做的项⽬中，既然拼接字符串⽆法传递数组给后台，所以正常都传递JSON字符串。页⾯创建的JSON对象转化为字符串，

然后后台通过JSON的解析包去解析。千万别忘了js转换JSON对象为字符串:

varjson_str=ify(json_object);

4.针对$.post()函数，详细的可以看看。

jQuery超链接请求

jQuery对超链接请求的操作，就有点像上⾯这个提交表单和额外参数的demo，不过因为没有表单，所以超链接请求提交的参数都是额外的

参数，或者说是任意想要提交的参数。

jsp代码

注意：a标签的href属性必须设置为#,因为a标签默认会发⽣跳转。

jQuery代码

java代码

Stringurname=ameter("name_ur");

Stringpassword=ameter("name_pwd");

StringpValue=ameter("url_p");

StringurlCheck=ameter("url_check");

1

2

3

4

账号:

密码:

jQuery提交这两个input的值

1

2

3

$(document).ready(function(){

//创建id为id_a的超链接标签单击事件

$("#id_a").bind("click",function(){

//获取想要传递参数的数值

varurl_ur=$("#id_ur").val();

varurl_pwd=$("#id_pwd").val();

//拼接url

varurl="rvlet/TestServlet?";

url+="url_ur="+url_ur+"&url_pwd="+url_pwd;

//使⽤post⽅式提交请求和参数

$.post(url);

});

});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

easy-ui的datagrid请求提交

这⾥写⼀个简单datagrid的提交，在datagrid的提交中，由于⼜有⼀层封装好的⽅法，所以使⽤起来更为简单明了。

jsp代码

jQuery代码

Stringurname=ameter("url_ur");

Stringpassword=ameter("url_pwd");

1

2