form表单提交数据如何拿到返回值

文章目录

form表单提交数据如何拿到返回值
- @[TOC](文章目录)
前言
一、如何拿到返回值
二、在这个过程中也会遇到一些问题
- 总结

前言

使用form表单提交参数的时候，是依据input框里面的name值传给后端的，只需在form节点添加action以及提交方式就可以调通前后端。但是这种直接的操作是不能够判断接口是否调通的，是拿不到返回值的。这就意味着不能够做对应的操作。

一、如何拿到返回值

1：引入jquery.form.js的插件，这是一个jquey提供给form表单提交的一个插件；
2：创建回调函数：

代码如下（示例）：

let options={success : showResponse,    // 提交后的回调函数timeout : 3000    // 限制请求的时间，当请求大于3秒后，跳出请求}

它还有其他的参数，看需求引入

代码如下（示例）：

let options={//target : '#output',    // 把服务器返回的内容放入id为output的元素中//beforeSubmit : showRequest,    // 提交前的回调函数// url : url,    //默认是form的action，如果申明，则会覆盖// type : type,    // 默认值是form的method("GET" or "POST")，如果声明，则会覆盖// dataType : null,    // html（默认）、xml、script、json接受服务器端返回的类型// clearForm : true,    // 成功提交后，清除所有表单元素的值// resetForm : true,    // 成功提交后，重置所有表单元素的值}

回调函数里面就能够获取到返回值

代码如下（示例）：

function showResponse(responseText,statusText){if (statusText != "success"){layer.confirm('发布失败！', {btn: ['确定']  //按钮, icon: 5, anim: 6}, function (index) {lock = true;layer.close(index);});}if (responseText.code == 200) {layer.confirm('发布成功', {btn: ['确定']  //按钮}, function () {window.location.reload();});} else {layer.confirm('发布失败，请重试', {btn: ['确定']  //按钮}, function (index) {lock = true;layer.close(index);});}}

最后进行提交操作

$("#publishForm").ajaxSubmit(options);

二、在这个过程中也会遇到一些问题

比如说上述做完后，提交表单会跳转一个新的空白页，新的空白页就是你接口的地址，以下方案可以解决这个问题：（其实这样接口也是调通了的）
1：创建一个iframe表单
2：form表单的target指向iframe的name值

因为action是提交到后台代码，走后台。target是让它走前端，跳转隐藏的iframe，实现表单提交后跳转空白页。这样就可以解决前端提交form表单跳转到空白页的情况了。

总结

主要就是创建一个回调函数，然后在传统的提交form表单的方法调用即可。

form表单提交数据如何拿到返回值相关推荐

HTML form 表单提交数据采用ajax方式返回成功后页面跳转问题
今天遇到了一个问题就是写注册的html时候,采用的from表单取数据 ajax 发请求请求成功后发现不能跳转页面 . 要注意几点就是: 1.input标签type类型 submit要改为butto ...
form表单提交数据，处理后端返回数据
引入在线 jquery-form.js <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jq ...
Django(part17)--form表单提交数据
学习笔记,仅供参考,有错必纠 form表单 form表单的主要作用是和服务器进行交互,为服务器端提供数据. name属性 form表单有name属性,name属性类似于客户端与服务器端之间的约定. f ...
js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题...
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
form表单提交数据的同时上传文件代码示例
form表单提交数据的同时在表单中上传文件代码示例一.定义页面注意:在form表单中加入属性 enctype="multipart/form-data" 表示此表单支持文件上 ...
form表单提交数据不让跳转办法
form表单提交数据不让跳转办法应用场景: 1.弹出层 2.需要连续提交多条记录的情况 3.页面多个存在提交事件,需要局部提交情况方法一:加个return false,阻止表单跳转 <for ...
element form表单提交数据之后清空所有输入框
element form表单提交数据之后清空所有输入框首先el-form标签上的ref属性名和调方法名统一,还有要绑定所有表单数据的一个大对象就是 :model属性,然后prop属性绑定的值要和v- ...
JS动态模拟Form表单提交数据
分享知识传递快乐 JS动态模拟Form表单提交数据 <!DOCTYPE html> <html lang="en"> <head><m ...
html 提交form表单提交数据格式,form表单提交数据
form表单提交的几种方法 HTML表单提交的几种方式方式一:通过submit按钮提交方式二:通过一般按钮button提交1/3javascript">functionsubmit1( ...

form表单提交数据如何拿到返回值

form表单提交数据如何拿到返回值

文章目录

前言

一、如何拿到返回值

二、在这个过程中也会遇到一些问题

总结

form表单提交数据如何拿到返回值相关推荐

最新文章

热门文章