转载于：使用ajax方法实现form表单的提交 - 程序员十三 - 博客园 (cnblogs.com)
οnsubmit=“reutrn false”：表示禁止表单提交。
data: $('#addTaskform').serialize(),序列化提交表单数据。
不要忘记引用js文件
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>一、使用form提交数据
1.前后端完全分离，单独测试后端，可以直接使用form提交。
form表单提交，主要action标明跳转的地址，type的类型要是submit。
此种方法是交给后端处理数据传递成功后页面的跳转。
前端代码
<form action="/addMergeTask" method="get">任务名称:<input type="text" name="taskName" /><br>源数据库连接名:<input type="text" name="srcLink" /><br>目标数据库连接名:<input type="text" name="tarLink" /><br>源数据表:<input type="text" name="srcTable" /><br>目标数据表:<input type="text" name="tarTable" /><br><input type="submit" value="提交">
</form>后端代码
@RequestMapping(path = "/addMergeTask",method = RequestMethod.GET)@ResponseBodypublic Result<Integer,Object> addmergeTask(@RequestParam("taskName") String taskName,@RequestParam("srcLink") String srcLink,@RequestParam("tarLink") String tarLink,@RequestParam("srcTable") String srcTable,@RequestParam("tarTable") String tarTable){boolean res= mergeTaskService.addmergeTask(taskName,srcLink,tarLink,srcTable,tarTable);int status=res? RequestResCodeConst.SUCCESS:RequestResCodeConst.FAILURE;String message=res?"发布成功":"发布失败";return new Result<>(status,message);}二、使用ajax提交数据，前端实现页面跳转
- 在常用方式中，点击的登录按钮的type为"submit"类型，此处为button类型；
- 在常用方式中，form的action不为空,此处为空。
- ajax方式中需要注意的是$.ajax方法中的参数：dataType和data。
- data可以使用.serialize序列化提交
呈现效果
前端代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js">
</script><script type="text/javascript">function login(){$.ajax({//几个参数需要注意一下dataType: "json",url: "http://localhost:8080/addLink" ,data: $('#form1').serialize(),success: function (result) {console.log(result);//打印服务端返回的数据(调试用)if (result.status == 200) {alert(result.message);}},error : function() {alert("异常！");}});}</script>
</head>
<body><div id="form-div"><form id="form1" onsubmit="return false" action="##" >连接名:<input type="text" name="linkName" /><br>IP地址:<input type="text" name="linkAdd" /><br>数据库类型:<input type="text" name="linkType" /><br>端口号:<input type="text" name="portName" /><br>用户名:<input type="text" name="userName" /><br>密码:<input type="password" name="psw" /> <br>数据库:<input type="text" name="dataBaseName" /> <br><input type="button" value="提交" onclick="login()"></form>
</div></body>
</html>后端代码
@RequestMapping(path="/addLink",method = RequestMethod.GET)@ResponseBodypublic Result<Integer,Object> addLink(@RequestParam("linkName") String linkName,@RequestParam("linkAdd") String linkAdd, @RequestParam("linkType") String linkType, @RequestParam("portName") String portName, @RequestParam("userName") String userName, @RequestParam("psw") String psw,@RequestParam("dataBaseName") String dataBaseName){boolean res= dataBaseService.addLink(linkName,linkAdd,linkType,portName,userName,psw,dataBaseName);int status=res? RequestResCodeConst.SUCCESS:RequestResCodeConst.FAILURE;String message=res?"发布成功":"发布失败";return new Result(status,message);}
