js中用ajax实现表单提交,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)

ajax的表单提交，与传送数据

ajax的表单提交 $.ajax ({ url: "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实现导入操作 方式二

页面代码:

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

MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单:

hdu5412(动态区间第k大)

CRB and Queries Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Other ...

Magento速度优化

一.Magento Compiler可以提高 25% 到 50% 速度 Magento的性能一直是大家比较关心的焦点,现在Magento最新的版本 1.3.2.2 增加了 Magento Compil ...

Android 一些错误

android fragment里面放viewpager 嵌套fragment 报错: 解决:在adapter的构造方法里加上 super(fragment.getChildFragmentManag ...

[Functional Programming] Functional JS - Pointfree Logic Functions

Learning notes. Video. Less than: If you use 'ramda', you maybe know 'lt, gt'.. R.lt(2, 1); //=> ...

gcc自有的define语法，解决变量多次自加的问题

如果定义一个这样的宏: #define MAX(a,b) ((a)>(b)?(a):(b)) int main(void){ int a=5,b=10; MAX(a++,b++); printf ...

JAVA第一个窗体小程序

import java.awt.*;public class Day1015_Frame{    public static void main(String[] args)    {         ...

qml自定义带文字的button tabbutton

https://blog.csdn.net/u014416260/article/details/54579480