Thinkjs使用ajax实现表单提交
//前端代码
1 $('form').submit(evt=>{
evt.preventDefault();//阻止表单默认提交
$.ajax({
url: '/user/personal/update',
type: 'POST',
dataType: 'json',
data: $('form').serialize(),
success:res=>{
if(!res.errno) alert('上传成功!');
else alert('res.errmsg');
}
});
});
//后台(controller)-src/user/controller/update.js
1 async indexAction(){
return this.display();
}
async updateAction(){//通过post的方式来获取值即可
let userList = this.model('user');
let userInfo = await this.session('userInfo');
let formData = this.post();//获取所有传进来的表单数据
let affectedRows = await userList.where({user_loginname: userInfo.login}).update({user_name: this.post('inputNickname'),user_mailbox:this.post('inputEmail'),user_tellphone:this.post('inputTell'),user_city:this.post('inputCity')});
this.success();//此接口的返回值
}
前端通过serialize()序列化,后端通过this.post(key)获取即可,key就是html中表单元素的name值。
Serialize()的结果是一个字符串,类似表单提交的字符串。Eg:'a=1&b=cccc'。
Ajax中的type是'post',所以后端中通过this.post(key)方式获取即可。
Ps:ajax的type如果是'get',那么后端通过this.get('key')获取即可。
Ps2:在后端相当于没有用ajax,和 直接通过form的post和get提交的那种获取数据方式是相同的,但是如果要区分的话,可以通过下面这种方式来获取
具体可以参照thinkjs官方文档中的controller.get(),controller.post和controller.parma()的具体内容(https://thinkjs.org/zh-cn/doc/2.2/api_controller.html)
Thinkjs使用ajax实现表单提交的更多相关文章
- ajax的表单提交,与传送数据
ajax的表单提交 $.ajax ({ url: "<%=basePath%>resource/addPortDetectOne.action", dataType: ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- input file 在开发中遇到的问题 类似ajax form表单提交 input file中的文件
最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...
- Ajax form表单提交
1. 使用 $("form").serialize() 来获取表单数据 $.ajax({ type: 'post', url: 'your url', data: $(" ...
- ajax模拟表单提交,后台使用npoi实现导入操作 方式二
页面代码: <form id="form1" enctype="multipart/form-data"> <div style=" ...
- ajax模拟表单提交,后台使用npoi实现导入操作 方式一
页面代码: <form id="form1" enctype="multipart/form-data"> <div style=" ...
- 不使用Ajax,如何实现表单提交不刷新页面
不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...
- MVC中处理表单提交的方式(Ajax+Jquery)
MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...
- form表单提交和ajax表单提交,关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作
[文章来源]由于自己对于form研究甚少,所以一直用的都是AJAX进行提交,这次后台提出要用form提交,顺便深入研究一下:之前在做表单的时候,发现input可以通过设置不同的type属性,调用不同的 ...
随机推荐
- bzoj1012: [JSOI2008]最大数maxnumber [单调队列]
Description 现在请求你维护一个数列,要求提供以下两种操作:1. 查询操作.语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度.2. 插 ...
- strtok函数 分类: c++ 2014-11-02 15:24 214人阅读 评论(0) 收藏
strtok函数是cstring文件中的函数 strtok函数是cstring文件中的函数 其功能是截断字符串 原型为:char *strtok(char s[],const char *delin) ...
- file-API 实现添加图片 预览缩略图(自己学习)
首先看看 "效果图" : 我们最终实现的就是点击右侧的"相机"按钮添加想要添加的图片然后可以根据需要删除(点叉删除本条)或再次添加图片,并显示缩略图....走起 ...
- Hadoop(一)Centos7虚拟机网络配置
Centos7虚拟机网络配置(桥接模式) 一 VirtualBox提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换模式)和host-only(主机模式). 1 桥接模式(br ...
- Python LeetCode
Python不熟悉 不同的做法 404. Sum of Left Leaves 这是我的做法,AC. class Solution(object): res = 0 def recursive(sel ...
- attr(),addClass()使用方法练习
这次我主要是想要完成2个li之间样式的变化.方法比较傻,如果有人有更好的办法或者有别问题,希望可以不吝指教. <!DOCTYPE html><html> <head> ...
- 纯JS实现像素逐渐显示
就是对于新手的我,以前从来没有做过对像素进行操作的实例.于是把资料书找了出来,实现了这个功能,比较简单,大神勿喷.下面是效果图,因为重在思路,效果就简陋一些. 其实就是简单的用JS实现将左上角的矩形随 ...
- oAuth 认证
这段时间公司开发项目用到oAuth2协议,现在做一下梳理. CORS即Cross Origin Resouce Share,跨域资源共享:是W3C为防止脚本攻击,而制定的安全标准之一,它云溪浏览器向跨 ...
- NYOJ--27--dfs--水池数目
/* Name: NYOJ--27--水池数目 Author: shen_渊 Date: 17/04/17 15:42 Description: 经典dfs水题,,, */ #include<i ...
- 案例:Oracle报错ASM磁盘组不存在或没有mount
案例:Oracle报错ASM磁盘组不存在或没有mount 环境:RHEL 6.5 + Oracle Standby RAC 11.2.0.4 我做Standby RAC实验时,在恢复控制文件时,报错无 ...