//前端代码
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. 配置HTTPS服务

    环境为CentOS 7.3.httpd2.4.6 一 搭建证书 说明: CA 主机为192.168.29.3 client主机为 192.168.29.100 1 生成私钥 [root@centos7 ...

  2. (转)log4j(五)——如何控制不同目的地的日志输出?

    一:测试环境与log4j(一)——为什么要使用log4j?一样,这里不再重述 1 老规矩,先来个栗子,然后再聊聊感受 package test.log4j.test5; /** * @author l ...

  3. js校验身份证

    1 <%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %> &l ...

  4. 【canvas学习笔记二】绘制图形

    上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...

  5. raft协议安全性保证

    分布式系统中主要的问题就是如何保持节点状态的一致性,不论发生任何failure,只要集群中大部分的节点可以正常工作,则这些节点具有相同的状态,保持一致,在client看来相当于一台机器. 一致性问题本 ...

  6. Mybatis-Generator生成Mapper文件中<if test="criteria.valid">的问题解答

    写在前面 <Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦> 由于开源了项目的缘故,很多使用了My Blog项目的朋友遇到问题也都会联系我去 ...

  7. 如何自己写一个公用的NPM包

    以markdown-clear,创建过程为例,讲解整个NPM包创建和发布流程 1 如何创建一个包 1.1 创建并使用一个工程 在GitHub上新建一个仓库,其名markdown-clear clone ...

  8. 编写一个矩形类,私有数据成员为矩形的长( len)和宽(wid),wid设置为0,有参构造函数设置和的值,另外,类还包括矩形的周长、求面积、取矩形的长度、取矩形的长度、取矩形的宽度、修改矩形的长度和宽度为对应的形参值等公用方法。

    class Rectangle { private double len, wid; public Rectangle()//求矩形周长 { len = 0; wid = 0; } public Re ...

  9. JVM笔记——技术点汇总

    目录 · 初步认识 · Java里程碑(关键部分) · 理解虚拟机 · Java虚拟机种类 · Java语言规范 · Java虚拟机规范 · 基本结构 · Java堆(Heap) · Java栈(St ...

  10. BOM部分笔记整理

    BOM部分整理 (章节 8.9) 概览: 一.介绍BOM 在web中,JS的核心对象就是BOM. 1.1 在浏览器中,window对象 == global 所以,你在全局环境下定义的变量,函数都会自动 ...