//前端代码
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. Memcached的基础梳理

    1 .Memcached 概念 官方解释如下: What is Memcached? Free & open source, high-performance, distributed mem ...

  2. maven创建web工程Spring配置文件找不到问题解决方案

    使用maven创建web工程,将Spring配置文件applicationContext.xml放在src/resource下,用eclipse编译时提示class path resource [ap ...

  3. Objectiv-C UIKit基础 NSLayoutConstraint的使用(VFL实现)

    利用VFL可视化语言 (简单的抛砖引玉) 构建3个View 橙色和绿色左中右间隔20 上间隔40 高为200 蓝色在橙色内(0,0)处 宽高为橙色的一半 实现效果如下 由于atutosize和auto ...

  4. C#的基础数据类型

    一.概述 C# 的类型系统是统一的,因此任何类型的值都可以按对象处理.C# 中的每个类型直接或间接地从 object 类类型派生,而 object 是所有类型的最终基类.C#的数据类型主要分为三类:值 ...

  5. 【http】post和get请求的区别

    两种常用的HTTP请求方式:post和get   get:从指定的资源进行请求.数据长度有限制(2048个字符)可被缓存.可被保留在浏览器历史记录中,安全性较差.发送敏感信息如密码时不适用.   po ...

  6. 深入浅出数据结构C语言版(12)——从二分查找到二叉树

    在很多有关数据结构和算法的书籍或文章中,作者往往是介绍完了什么是树后就直入主题的谈什么是二叉树balabala的.但我今天决定不按这个套路来.我个人觉得,一个东西或者说一种技术存在总该有一定的道理,不 ...

  7. SpringBoot整合Mybatis之项目结构、数据源

    已经有好些日子没有总结了,不是变懒了,而是我一直在奋力学习springboot的路上,现在也算是完成了第一阶段的学习,今天给各位总结总结. 之前在网上找过不少关于springboot的教程,都是一些比 ...

  8. Linux - 简明Shell编程02 - 变量(Variable)

    脚本地址 https://github.com/anliven/L-Shell/tree/master/Shell-Basics 示例脚本及注释 #!/bin/bash v1=test-variabl ...

  9. C# 开机自启动和最小化托盘显示

    C# 开机自启动和最小化托盘显示 一.      C# 开机自启动 C# 开机自启动,这个功能是大多数服务型软件很常用一个功能,但是这个功能确是不 太好做,花了两天想对策.不过最终呢,结果还是很满意的 ...

  10. android学习SeekBar的使用

    SeekBar介绍听歌的时候,我们常常想快进或者快退到某一时间段,听歌的时候我们控制音量大小听歌,SeekBar可以通过滑块的位置来标示数值,而且拖动条允许用户拖动滑块来改变进度条的大小 SeekBa ...