精华内容
下载资源
问答
  • ajax提交form表单数据serialize转为JSON

    万次阅读 2017-11-02 22:30:21
    本文主要介绍采用ajax提交form表单数据时,将form表单数据转为JSON的方法并提供了一段代码。

    在用ajax提交表单数据时,我们常需要将form表单数据转为JSON格式,这样后端控制器可以方便的将JSON字符串转为Bean形式。

    在此提供一小段代码1,让你快速的将form表单数据转为JSON格式。

    function getFormData($form) {
        var unindexed_array = $form.serializeArray();
        var indexed_array = {};
    
        $.map(unindexed_array, function (n, i) {
          indexed_array[n['name']] = n['value'];
        });
    
        return indexed_array;
    }

    当你需要将form表单传递给Controller之后,则可以:

    function submitForm() {
        $.ajax({
          type: 'post',
          url: '',
          contentType: 'application/json',
          dataType: 'json',
          data: JSON.stringify(getFormData($form)),
          success: function (result) {
            //正确处理
          },
          error: function () {
            //错误处理
          }
        });
      }

    后端的Controller可以采用@RequestBody来接收JSON字符串,并自动转为对应的Bean。

    参考资料

    展开全文
  • ajax提交Form表单数据到后台

    千次阅读 2019-01-26 23:52:17
    先引入jQuery。 <script type="text/javascript"...这一段是提交数据到后台的JS代码。 <script type="text/javascript"> function login() { $.ajax({ ..

    先引入jQuery。

    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>

    这一段是提交数据到后台的JS代码。

    <script type="text/javascript">
    		function login() {
                $.ajax({
                //几个参数需要注意一下
                    type: "POST",//方法类型,或者用GET
                    dataType: "html",//预期服务器返回的数据类型,可以改成json
                    url: "http://localhost:8080/jiaojing/DBServlet" ,//ip:端口/项目名称/Servlet名称
                    data: $('#upload').serialize(),//获取表单里的数据到这里
                    success: function (result) {
                        
                        if (result == 520) {
                            alert("保存成功!");
                        }
                        ;
                    },
                    error : function() {
                        alert("异常!");
                    }
    展开全文
  • 通过ajax提交form表单数据的几种方式

    千次阅读 2020-01-11 18:39:13
    模拟HTML表单,相当于将HTML表单映射成表单对象,自动将表单对象中的数据拼接成请求参数的格式。 异步上传二进制文件 使用 在原生ajax中的使用 <form id="form"> <input type="text" name="username...

    一、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);
      	});
      
    展开全文
  • 使用AJAX提交Form表单

    2012-06-26 22:29:04
    使用AJAX提交Form表单使用AJAX提交Form表单使用AJAX提交Form表单
  • ajax提交form表单

    千次阅读 2018-11-28 12:35:02
    ajaxform表单有很多有趣的互动,ajax提交form表单就是其中一种,这种方法主要是用来提交带图数据的。 html页面,我把图片单独放到form表单内,其他数据放到form外即可 &amp;lt;form method=&quot;post&...

    ajax和form表单有很多有趣的互动,ajax提交form表单就是其中一种,这种方法主要是用来提交带图数据的。
    html页面,我把图片单独放到form表单内,其他数据放到form外即可

           <form method="post" enctype="multipart/form-data" id="testForm">
                 <input type="file" name="problemImage" id="file" >
      </form>
    

    js

    
    
        var formData = new FormData(document.getElementById("testForm"));//表单id
        var problemTitle=$("#problemTitle").val();
        var problemDescribe = $("#problemDescribe").val();
        formData.append("problemTitle", problemTitle);
        formData.append("problemDescribe", problemDescribe);
            $.ajax({
                url: '',
                type: 'post',
                data: formData,
                async: false,//同步加载
                contentType: false,//防止jq对formdata操作,默认为ture
                processData: false,//防止序列化操作
                success: function (result) {
       
                }
            });
        }
    

    后台用MultipartFile file接收图片即可

    展开全文
  • java导入导出,全部文件jar包,ajax提交form表单后返回提示数据,所有用到的文件,方法,数据,有利于学习,方便运用

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 98,585
精华内容 39,434
关键字:

ajax提交form表单数据