通过ajax提交form表单数据的几种方式-ajax formdata提交表单

通过ajax提交form表单数据的几种方式一、FormData方法作用:模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。异步上传二进制文件使用在原生ajax中的使用<formid=”form”><inputtype=”text”name=”username”/><inputtype=”password”…

一、FormData方法

作用:

模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。 异步上传二进制文件

使用

在原生ajax中的使用

<form >     <input type="text" name="username" />     <input type="password" name="password" />     <input type="button"/> </form>

是否还在为Ide开发工具频繁失效而烦恼，来吧关注以下公众号获取最新激活方式。亲测可用！

为防止网络爬虫，请关注公众号回复”口令”

激活idea 激活CLion DataGrip DataSpell dotCover dotMemory dotTrace GoLand PhpStorm PyCharm ReSharper ReShaC++ Rider RubyMine WebStorm 全家桶 解锁下载刷新

【正版授权，激活自己账号】：Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】：官方授权 正版激活 自己使用，支持Jetbrains家族下所有IDE…

  var form = document.getElementById('form');   // 将html表单转换为formData表单对象  var formData = new FormData(form );  // 创建ajax对象  var xhr = new XMLHttpRequest();  // 对ajax对象进行配置  xhr.open('post', 'http://localhost:3001/login');  // 当发送跨域请求时，携带cookie信息  xhr.withCredentials = true;  // 发送请求并传递请求参数  xhr.send(formData);  // 监听服务器端给予的响应内容  xhr.onload = function () {        console.log(xhr.responseText);  }

服务器端：

app.post('/login', (req, res) => {        // 创建表单解析对象  var form = formidable.IncomingForm();  // 解析表单  form.parse(req, (err, fields, file) => {        // 接收客户端传递过来的用户名和密码  const {       username, password } = fields;  // 用户名密码比对  if (username == 'test' && password == '123456') {        // 设置session  req.session.isLogin = true;  res.send({      message: '登录成功'});  } else {        req.session.isLogin = false;  res.send({      message: '登录失败, 用户名或密码错误'});  }  })  })

注意:

Formdata 对象不能用于 get 请求，因为对象需要被传递到 send 方法中，而 get 请求方式的请求参数只能 放在请求地址的后面。 服务器端 bodyParser 模块不能解析 formData 对象表单数据，我们需要使用formidable模块进行解析。

在jquery中的使用

<form >     <input type="text" name="username" />     <input type="password" name="password" />     <input type="button"/> </form>

  let form = document.querySelector('#form');  $.ajax({        type:"post",  url:"/login",  data:formData,  success:function(res){        },  processData: false,  contentType: false,  error:function(xhr){        console.log(xhr)  }  })

服务器端：

app.post('/login', (req, res) => {        // 创建表单解析对象  var form = formidable.IncomingForm();  // 解析表单  form.parse(req, (err, fields, file) => {        // 接收客户端传递过来的用户名和密码  const {       username, password } = fields;  // 用户名密码比对  if (username == 'test' && password == '123456') {        // 设置session  req.session.isLogin = true;  res.send({      message: '登录成功'});  } else {        req.session.isLogin = false;  res.send({      message: '登录失败, 用户名或密码错误'});  }  })  })

二、SerializeArray方法

作用:

将表单中的数据自动拼接成数组形式

使用

在原生ajax中的使用(发送json形式的数据)

 <form >   <input type="text" name="username" />   <input type="password" name="password" />   <input type="submit"/>  </form>

  function serialize2Json(form) {            var result = {      };      // [{name: 'email', value: '用户输入的内容'}]      var f = form.serializeArray();      f.forEach(function(item) {                // result.email          result[item.name] = item.value;      });      return result;  }  $('#form').on('submit', function() {          let result = serialize2Json($(this)); //将表单数据转为json格式的数据    // 创建ajax对象  var xhr = new XMLHttpRequest();  // 对ajax对象进行配置  xhr.open('post', 'http://localhost:3001/json');  // 当发送跨域请求时，携带cookie信息  xhr.withCredentials = true;  // 设置请求参数格式的类型（post请求必须要设置）  xhr.setRequestHeader('Content-Type', 'application/json');  // 发送请求并传递请求参数  xhr.send(JSON.stringify(result ));// 将json对象转换为json字符串发送  // 监听服务器端给予的响应内容  xhr.onload = function () {        console.log(xhr.responseText);  }     // return false//默认阻止提交数据跳转 })

服务器端：

app.post('/json', (req, res) => {      res.send(req.body);});

在jquery中的使用(发送json形式的数据)

 <form >   <input type="text" name="username" />   <input type="password" name="password" />   <input type="submit"/>  </form>

  // 将表单中用户输入的内容转换为对象类型   function serializeObject (obj) {           // 处理结果对象   var result = {      };     // [{name: 'username', value: '用户输入的内容'}, {name: 'password' , value: '123456'}]   var params = obj.serializeArray();     // 循环数组 将数组转换为对象类型   $.each(params, function (index, value) {            result[value.name] = value.value;      })      // 将处理的结果返回到函数外部    return result;     }  $('#form').on('submit', function() {          //将表单数据转为json格式的数据      let result = serialize2Json($(this));       $.ajax({        type:"post",  url:"/json",  // 向服务器端发送的请求参数  // name=zhangsan&age=100  // data: {        // name: 'zhangsan',  // age: 100  // },  data: JSON.stringify(result),  // 指定参数的格式类型  contentType: 'application/json',  success:function(res){          },  error:function(xhr){        console.log(xhr)  }  })     // return false//默认阻止提交数据跳转 })

服务器端：

app.post('/json', (req, res) => {      res.send(req.body);});

三、Serialize方法

作用:

将表单中的数据自动拼接成字符串类型的参数
注：(参数名称=参数值&参数名称=参数值)

使用

在原生ajax中的使用

 <form >   <input type="text" name="username" />   <input type="password" name="password" />   <input type="submit"/>  </form>

post请求方式

  $('#form').on('submit', function() {        var params = $('#form').serialize();// username=''&age=''  // 创建ajax对象  var xhr = new XMLHttpRequest();  // 对ajax对象进行配置  xhr.open('post', '/test');  // 当发送跨域请求时，携带cookie信息  xhr.withCredentials = true;  // 设置请求参数格式的类型（post请求必须要设置）  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  // 发送请求并传递请求参数  xhr.send(params);//   // 监听服务器端给予的响应内容  xhr.onload = function () {        console.log(xhr.responseText);  }     // return false//默认阻止提交数据跳转 })

服务器端：

app.post('/test', (req, res) => {      res.send(req.body);});

get请求方式

  $('#form').on('submit', function() {        var params = $('#form').serialize();// username=''&age=''  // 创建ajax对象  var xhr = new XMLHttpRequest();  // 对ajax对象进行配置  xhr.open('get', 'http://localhost:3001/test?'+params);  // 当发送跨域请求时，携带cookie信息  xhr.withCredentials = true;  // 发送请求并传递请求参数  xhr.send();//   // 监听服务器端给予的响应内容  xhr.onload = function () {        console.log(xhr.responseText);  }     // return false//默认阻止提交数据跳转 })

服务器端：

app.get('/test', (req, res) => {      res.send(req.query);});

在jquery中的使用

 <form >   <input type="text" name="username" />   <input type="password" name="password" />   <input type="submit"/>  </form>

post请求方式

  $('#form').on('submit', function() {          //将表单数据转为字符串类型的数据      var params = $('#form').serialize();       $.ajax({        type:"post",  url:"/test",  data:params,  // 指定参数的格式类型  contentType: 'application/x-www-form-urlencoded',  success:function(res){        console.log(res)  },  error:function(xhr){        console.log(xhr)  }   })     // return false//默认阻止提交数据跳转 })

服务器端：

app.post('/test', (req, res) => {      res.send(req.body);});

get请求方式

  $('#form').on('submit', function() {          //将表单数据转为字符串类型的数据      var params = $('#form').serialize();       $.ajax({        type:"get",  url:"/test",  data:params,  success:function(res){        console.log(res)  },  error:function(xhr){        console.log(xhr)  }   })     // return false//默认阻止提交数据跳转 })

服务器端：

app.get('/test', (req, res) => {      res.send(req.query);});