转载于：使用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);}

前后端交互之使用ajax方法实现form表单的提交相关推荐

使用ajax方法实现form表单的提交
2019独角兽企业重金招聘Python工程师标准>>> 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控 ...
使用ajax方法实现form表单的提交（Ajax和from提交的区别）
写在前面的话在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
php ajax form表单提交,Ajax方法实现Form表单提交的方法
这次给大家带来Ajax方法实现Form表单提交的方法,Ajax方法实现Form表单提交的注意事项有哪些,下面就是实战案例,一起来看一下. 写在前面的话在使用form表单的时候,一旦点击提交触发sub ...
用js将form表单同时提交到两个不同页面的方法
用js将form表单同时提交到两个不同页面的方法: <script type="text/javascript"> function dosubmit(){ windo ...
html表单通过js提交表单提交,JavaScript动态创建form表单并提交的实现方法
本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 ...
ajax和form表单的提交跳转问题
ajax和form表单的提交跳转问题使用ajax提交form表单数据的时候,把提交按钮的type="submit"改成type="button",防止点击提交 ...
Python前后端交互（ Flask Ajax ）
本文是自己学习Python前后端交互记录使用,之前没有学习过Python任何框架,前端也是简单学了一下,如哪里有问题,还望大家批评改正. 1. 前端 1.1 HTML布局这个就不用说啥了,登录长啥样 ...
ajax异步请求——form表单提交及表单序列化提交
ajax异步请求 AJAX介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方 ...
jQuery中ajax用form表单方式提交数据
给表单加ID值,如图: 写ajax方法,如图: servlet返回是否添加成功,如图: jsp页面 <div class="modal-content"><div ...

前后端交互之使用ajax方法实现form表单的提交

不要忘记引用js文件

一、使用form提交数据

前后端交互之使用ajax方法实现form表单的提交相关推荐

最新文章

热门文章