前后端交互之使用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提交数据，前端实现页面跳转

在常用方式中，点击的登录按钮的type为"submit"类型，此处为button类型；在常用方式中，form的action不为空,此处为空。ajax方式中需要注意的是$.ajax方法中的参数：dataType和data。data可以使用.serialize序列化提交

呈现效果

前端代码

后端代码

@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);

}