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

Javascript 专栏收录该内容
44 篇文章 0 订阅

一、FormData方法

作用:
  1. 模拟HTML表单,相当于将HTML表单映射成表单对象,自动将表单对象中的数据拼接成请求参数的格式。
  2. 异步上传二进制文件
使用
  • 在原生ajax中的使用

    
    <form id="form"> 
        <input type="text" name="username" /> 
        <input type="password" name="password" /> 
        <input type="button"/> 
    </form>
    
    
      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 id="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方法

作用:
  1. 将表单中的数据自动拼接成数组形式
使用
  • 在原生ajax中的使用(发送json形式的数据)
     <form id="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 id="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方法

作用:
  1. 将表单中的数据自动拼接成字符串类型的参数
    注:(参数名称=参数值&参数名称=参数值)
使用
  • 在原生ajax中的使用
     <form id="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 id="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);
    	});
    
  • 4
    点赞
  • 1
    评论
  • 21
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值