//前端代码
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实现表单提交的更多相关文章

  1. ajax的表单提交,与传送数据

    ajax的表单提交 $.ajax ({ url: "<%=basePath%>resource/addPortDetectOne.action", dataType: ...

  2. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  3. input file 在开发中遇到的问题 类似ajax form表单提交 input file中的文件

    最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...

  4. Ajax form表单提交

    1. 使用 $("form").serialize() 来获取表单数据 $.ajax({ type: 'post', url: 'your url', data: $(" ...

  5. ajax模拟表单提交,后台使用npoi实现导入操作 方式二

    页面代码: <form id="form1" enctype="multipart/form-data"> <div style=" ...

  6. ajax模拟表单提交,后台使用npoi实现导入操作 方式一

    页面代码: <form id="form1" enctype="multipart/form-data"> <div style=" ...

  7. 不使用Ajax,如何实现表单提交不刷新页面

    不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...

  8. MVC中处理表单提交的方式(Ajax+Jquery)

    MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t&q ...

  9. form表单提交和ajax表单提交,关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作

    [文章来源]由于自己对于form研究甚少,所以一直用的都是AJAX进行提交,这次后台提出要用form提交,顺便深入研究一下:之前在做表单的时候,发现input可以通过设置不同的type属性,调用不同的 ...

随机推荐

  1. vs2015数据驱动的单元测试

    今天在做测试的时候boss让我这个菜鸟做vs2015下c#的单元测试,并且给了我参考http://www.cnblogs.com/kingmoon/archive/2011/05/13/2045278 ...

  2. Android源码博文集锦4

    Android精选源码 一款常见的自定义加载动画 android开源记账项目CoCoin Android自定义view:拖拽选择按钮 Android指纹识别 一个折线图,它提供了几个非常实用的功能 一 ...

  3. 【HTML】dl dt dd

    摘要 看到没怎么使用过的html 标签,记录下 定义 dl 类似于 ul ,无任何样式,自定义列表容器, ul 为无序列表容器,ol 为有序列表容器 dt dd 类似于 li ,无任何样式,为帮助实现 ...

  4. PHP面向对象中 static:: 与 self:: parent:: $this-> 的区别

    很多好几年工作经验的PHP工程师,对PHP面向对象中 static:: .self::.parent::.$this->  的定义和使用都不清晰,特做详细梳理: static:: 可以访问全局作 ...

  5. mysql 5.7 root密码重置(centos 7)

    mysql5.7版本之后,与mariadb不同,在安装之后,在启动之时,会进行自动随机密码的设定,所以在systemctl start mysqld之后,会出现mysql -uroot -p无法登陆的 ...

  6. Android Binder机制详解:手写IPC通信

    想要掌握一样东西,最好的方式就是阅读理解它的源码.想要掌握Android Binder,最好的方式就是写一个AIDL文件,然后查看其生成的代码.本文的思路也是来自于此. 简介 Binder是Andro ...

  7. Python序列化和反序列化

    Python序列化和反序列化 通过将对象序列化可以将其存储在变量或者文件中,可以保存当时对象的状态,实现其生命周期的延长.并且需要时可以再次将这个对象读取出来.Python中有几个常用模块可实现这一功 ...

  8. centos7安装docker并安装jdk和tomcat(常用命令)

    阿里专属的镜像加速 在宿主机器编辑文件:vi /etc/docker/daemon.json 阿里专属的镜像加速地址,类似于"https://91cntlkt.mirror.aliyuncs ...

  9. opencv 小程序170323

    1.滤波 GaussianBlur(imgThresholded, imgThresholded, Size(5, 5), 0, 0);//高斯滤波 medianBlur(imgThresholded ...

  10. Activity中finish()和onDestroy()的区别

    finish()方法用于结束一个Activity的生命周期,而onDestory()方法则是Activity的一个生命周期方法,其作用是在一个Activity对象被销毁之前,Android系统会调用该 ...