前后端交互之使用ajax方法实现form表单的提交 |
您所在的位置：网站首页 › ajax获取文件 › 前后端交互之使用ajax方法实现form表单的提交 |
前后端交互之使用ajax方法实现form表单的提交
|
转载于：使用ajax方法实现form表单的提交 - 程序员十三 - 博客园 (cnblogs.com) οnsubmit=“reutrn false”：表示禁止表单提交。 data: $('#addTaskform').serialize(),序列化提交表单数据。 不要忘记引用js文件 一、使用form提交数据1.前后端完全分离，单独测试后端，可以直接使用form提交。
form表单提交，主要action标明跳转的地址，type的类型要是submit。 此种方法是交给后端处理数据传递成功后页面的跳转。
前端代码 任务名称: 源数据库连接名: 目标数据库连接名: 源数据表: 目标数据表:后端代码 @RequestMapping(path = "/addMergeTask",method = RequestMethod.GET) @ResponseBody public Result 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提交数据，前端实现页面跳转
呈现效果
前端代码 Title function login(){ $.ajax({ //几个参数需要注意一下 dataType: "json", url: "http://localhost:8080/addLink" , data: $('#form1').serialize(), success: function (result) { console.log(result);//打印服务端返回的数据(调试用) if (result.status == 200) { alert(resulssage); } }, error : function() { alert("异常！"); } }); } 连接名: IP地址: 数据库类型: 端口号: 用户名: 密码: 数据库:后端代码 @RequestMapping(path="/addLink",method = RequestMethod.GET) @ResponseBody public Result 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); } |
【本文地址】