精华内容
下载资源
问答
  • ajax传递多种数据类型的处理

    千次阅读 2019-01-24 17:51:41
    程序开发中,遇到了ajax传递多种数据类型,踩了很多坑,特总结回馈给大家,需求是ajax需要传递多条list和一个字符串两种数据类型 //批量保存 function save() { var mparentcode=$(" input[ name='...

    程序开发中,遇到了ajax传递多种数据类型,踩了很多坑,特总结回馈给大家,需求是ajax需要传递多条list和一个字符串两种数据类型

    	//批量保存
    	  function save() { 
    	var mparentcode=$(" input[ name='mparentcode' ] ").val();
    	var mfunccode=$(" input[ name='mfunccode' ] ").val();
    	var mfuncname=$(" input[ name='mfuncname' ] ").val();
    	//var mleaf=$(" input[ name='mleaf' ] ").val();
    	var mleaf = $("#mleaf").val();
    	var mindexid=$(" input[ name='mindexid' ] ").val();
    	var mlevelcode=$(" input[ name='mlevelcode' ] ").val();
    	var murl=$(" input[ name='murl' ] ").val();
    	var mremark=$(" input[ name='mremark' ] ").val();
    	
    	var mobj ={
    			parentcode:mparentcode,
    			funccode:mfunccode,
    			funcname:mfuncname,
    			leaf:mleaf,
    			
    			indexid:mindexid,
    			levelcode:mlevelcode,
    			url:murl,
    			remark:mremark
    	};
    	var productArray = new Array();
    	productArray.push(mobj);
    	
    	var tb = document.getElementById('detail_editable_1');    // table 的 id
    	var rows = tb.rows;                           // 获取表格所有行
    	for(var i = 1; i<rows.length; i++ ){
    	var obj = {};
    	 for(var j = 0; j<rows[i].cells.length; j++ ){    // 遍历该行的 td
    	 	obj[$(rows[i].cells[j]).children().attr('name')]= $(rows[i].cells[j]).children().val();
    	 	
    	       } 
    		  productArray.push(obj);
    
    	  
    	}

    在前台将list封装成一个个对象放入数组中,通过JSON.stringify方法把对象序列成json字符串

    后台使用Map<String, Object>进行接收,可以看到后台已经取到数据,分别用实体类list和String进行获取,便可以处理数据。

    public boolean saveVdSystemMenuTreeList(String parentId,List<MenuTree> list) {
    		// 根据ID删除数据
    		/*JSONObject jsonObject=JSONObject.fromObject(list); // 将数据转成json字符串
    		MenuTree per = (MenuTree)JSONObject.toBean(jsonObject, MenuTree.class); //将json转成需要的对象
    */		
    		
    		if(StringUtils.isNotEmpty(parentId)){
    
    			MenuTreeMapper.deleteByParentId(parentId);
    			MenuTreeMapper.deleteById(parentId);
    			// 批量添加菜单树列表
    			for(Object obj : list){
    				
    				JSONObject jsonObject=JSONObject.fromObject(obj); // 将数据转成json字符串
    				MenuTree per = (MenuTree)JSONObject.toBean(jsonObject, MenuTree.class); //将json转成需要的对象
    				int key = MenuTreeMapper.insertSelective(per);
    				if(key <= 0){
    					return false;
    				}
    			}
    		}
    		else{
    			return false;
    		}
    		
    		return true;
    	}

     

    展开全文
  • 1.使用json数据格式 传递数组 <button id="btn">点击</button> <script type="application/javascript"> $(function () { $("#btn").on("click",function (){ ...

    1.使用json数据格式

    • 传递数组
    <button id="btn">点击</button>
        <script type="application/javascript">
            $(function () {
                $("#btn").on("click",function (){
               
                    var nums=[1,2,3,4];
                    $.ajax({
                        type:"post",
                        url: "/test",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(nums),
                        success: function (result) {
                            alert(1)
                        }
                    });
                });
            })
        </script>
       @RequestMapping("/test")
        @ResponseBody
        public void  test(
                @RequestBody Integer [] nums
        ){
    
            for (int i=0;i<nums.length;i++){
                System.out.println("第"+i+"个值为:"+nums[i]);
            }
        }
    • 传递集合
    <button id="btn">点击</button>
        <script type="application/javascript">
            $(function () {
                $("#btn").on("click",function (){
                    var data = [{
                        username:"zhangsan",
                        password:"123"
                    },{
                        username:"lisi",
                        password:"123"
                    }];
    
                    $.ajax({
                        type:"post",
                        url: "/test",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(data),
                        success: function (result) {
                            alert(1)
                        }
                    });
                });
            })
        </script>
       @RequestMapping("/test")
        @ResponseBody
        public void  test(
                @RequestBody List<UserEntity> users
        ){
            users.forEach(user -> {
                System.out.println(user.toString());
            });
      }
    • 传递对象(同上)

    2.不使用json格式

    • 传递数组
       @RequestMapping("/test")
        @ResponseBody
        public void  test(
                @RequestParam(value = "nums") Integer nums[]
        ){
            for (int i=0;i<nums.length;i++){
                System.out.println("第"+i+"个值为:"+nums[i]);
            }
        }
    <button id="btn">点击</button>
        <script type="application/javascript">
            $(function () {
                $("#btn").on("click",function (){
                    var data = [{
                        username:"zhangsan",
                        password:"123"
                    },{
                        username:"lisi",
                        password:"123"
                    }];
                    var nums=[1,2,3,4];
                    $.ajax({
                        type:"get",
                        url: "/test",
                        traditional:true, //默认false
                        data: {
                            nums:nums
                        },
                        success: function (result) {
                            alert(1)
                        }
                    });
                });
            })
        </script>

    traditional:是否使用传统的方式浅层序列化。 通过ajax提交数组时,会自动在所设定的参数后面增加中括号:“[]”, 导致后端spring MVC中的@RequestParam获取不到参数。解决方法: ajax请求时增加:traditional: true 就可以正常提交了。原因如下: jQuery会调用jQuery.param序列化参数,jQuery.param( obj, traditional ) ,默认的话,traditional为false,即jquery会深度序列化参数对象, 以适应如PHP和Ruby on Rails框架,但servelt api无法处理, 我们可以通过设置traditional 为true阻止深度序列化。

     

    如果你不设置浅层序列化,对数组对象 应该这样设置

    var arr={params:['param','param2']};
    $.ajax({url:请求地址,
                data:arr,
                type:"POST",
                success:function(){
                    //do something
                }
            });
    展开全文
  • $.ajax几种数据数据类型的异步请求

    千次阅读 2017-04-04 23:17:42
    =================================================================...// 1.$.ajax带json数据的异步请求 var inputMac = $("#inputMac").val(); var selectType = $("#selectType").val(); var selectStatus = $
    =======================================================================
    
    // 1.$.ajax带json数据的异步请求
    <span style="font-size: 14px; font-family: 微软雅黑, 'Microsoft YaHei'; ">
    	var inputMac = $("#inputMac").val();
    	var selectType = $("#selectType").val();
    	var selectStatus = $("#selectStatus").val();
    	$.ajax({
    		type: "post",
    		dataType: 'json',
    		url: AjaxUrl,
    		data: {
    			mac: inputMac,
    			status: selectStatus,
    			type: selectType
    		},
    		async: false,
    		success: function (data, textStatus) {
    			if (data != null) {
    				var ap = eval(data);
    				if (ap != null && ap!="undefined" && ap.Id>0) {
    					window.location.href = 'index.aspx';
    					alert("添加成功。");
    					return;
    				}
    				else {
    					alert("添加失败,请检查输入是否正确。");
    					return;
    				}
    			}
    		},
    		complete: function (XMLHttpRequest, textStatus) {
    		},
    		error: function (e) {
    			alert("添加失败,请检查输入是否正确。");
    			return;
    		}
    	});
    </span>
    
    =======================================================================
    
    // 2.$.ajax序列化表格内容为字符串的异步请求
    <span style="font-size: 14px; font-family: 微软雅黑, 'Microsoft YaHei'; ">
    	var formParam = $("#form1").serialize(); 		//序列化表格内容为字符串
    	$.ajax({
    		type:'post',
    		url:'Notice_noTipsNotice',
    		data:formParam,
    		cache:false,
    		dataType:'json',
    		async: false,
    		success:function(data){
    		}
    	});
    </span>
    
    =======================================================================
    // 3.$.ajax拼接url的异步请求
    <span style="font-size: 14px; font-family: 微软雅黑, 'Microsoft YaHei'; ">
    	var yz=$.ajax({
    	type:'post',
    	url:'validatePwd2_checkPwd2?password2='+password2,
    	data:{},
    	cache:false,
    	dataType:'json',
    	async: false,
    	success:function(data){
    		if( data.msg =="false" ){
    			//服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间
    			textPassword2.html("<font color='red'>业务密码不正确!</font>");
    			$("#validatePassword2").
    			val("pwd2Error");
    			checkPassword2 = false;
    			return;
    		}
    	},
    		error:function(){}
    	});
    </span>
    
    =======================================================================
    // 4.$.ajax拼接data的异步请求
    <span style="font-size: 14px; font-family: 微软雅黑, 'Microsoft YaHei'; ">
    	$.ajax({
    		url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',
    		type:'post',
    		data:'merName='+values,
    		async : false, //默认为true 异步
    		error:function(){
    		alert('error');
    		},
    		success:function(data){
    			$("#"+divs).html(data);
    		}
    	});
    </span>
    
    =======================================================================
    // 5.asp.net .ashx文件在服务端获取post/get参数
    <span style="font-size: 14px; font-family: 微软雅黑, 'Microsoft YaHei'; ">
    	public static string GetResponse(string responsevalue){//判断提交方式
    		HttpContext context = HttpContext.Current;
    		string id="";
    		if (context.Request.RequestType.ToLower() == "get"){
    			id = context.Request.QueryString[responsevalue];
    		}else{
    			id = context.Request.Form[responsevalue];
    		}
    		return id;
    	}
    	</span>
    展开全文
  • ajax数据类型分析

    千次阅读 2015-08-17 22:53:43
    ajax在浏览器和服务器端传输数据的本质是文本内容(不支持二进制数据),这些文本内容可以是json、xml、html或者纯文本格式,浏览器端把服务端返回的文本内容转为JavaScript的json对象、xml对象或者html对象。

    ajax在浏览器和服务器端传输数据的本质是文本内容(不支持二进制数据),这些文本内容可以是json、xml、html或者纯文本格式,浏览器端把服务端返回的文本内容转为JavaScript的json对象、xml对象或者html对象。目前主流的JavaScript库都提供了ajax请求的封装,以jQuery为例。

    $.ajax({
        url: 'http://请求路径',
        data: {},               // 请求参数,没有可以不写
        dataType: 'json',       //支持json、xml、html、text、jsonp等
        type: 'get',            //有get和post两种请求,默认是get
        timeout: 60000          //ajax请求超时
    }).done(function(data){
        //ajax请求成功回调函数
    }).fail(function(){
        //ajax请求失败回调函数
    });

    jQuery通过dataType把返回的数据转成相应的JavaScript对象,因此我们在使用过程中无需手动进行转换,只要在回调函数中使用即可。如果把ajax请求的路径以及参数通过url直接在浏览器输入,即可看到返回的文本数据,如图所示。


    ajax

    json

    目前绝大部分的ajax请求的数据都是json格式,在某种程度上ajax基本上和json绑定在一起使用,以至于给人一种错觉就是ajax就是处理json数据。其实json只是一种数据格式,跟ajax并没有必然的联系,json数据需要在JavaScript中转换成对象实例(目前大部分浏览器都内置了JSON.parse()方法,也可以用jQuery的$.parseJSON()方法)。

    下面用$.ajax()请求json数据,由于jQuery自动把数据转成json对象,因此把dataType指定为text。

    $.ajax({
        url: 'http://localhost:8280/logweb/test/json.do',
        dataType: 'text'
    }).done(function(text){
        console.dir(arguments);
        //text的类型
        console.dir('text的类型是:' + Object.prototype.toString.call(text));
        console.dir(text);
    
        var json = $.parseJSON(text);
        console.dir('json的类型是:' + Object.prototype.toString.call(json));
        console.dir(json);
    });

    从浏览器控制台输出的结果可知,text是字符串,json是Object对象。

    json

    xml

    ajax也可以处理xml数据,确切的说是JavaScript也能处理xml数据。下面用$.ajax()请求xml数据,由于jQuery自动把数据转成xml对象,因此把dataType指定为text。

    $.ajax({
        url: 'http://localhost:8280/logweb/test/xml.do',
        dataType: 'text'
    }).done(function(text){
        console.dir(arguments);
        //text的类型
        console.dir('text的类型是:' + Object.prototype.toString.call(text));
        console.dir(text);
    
        var xml = $.parseXML(text);
        console.dir('xml的类型是:' + Object.prototype.toString.call(xml));
        console.dir(xml);
    });

    从浏览器控制台输出的结果可知,text是字符串,xml是XMLDocument对象。

    xml

    html

    ajax也可以接收html,通常html都是直接插入其他html元素中。

    $.ajax({
        url: 'http://localhost:8280/logweb/test/html.do',
        dataType: 'text'
    }).done(function(text){
        console.dir(arguments);
        //text的类型
        console.dir('text的类型是:' + Object.prototype.toString.call(text));
        console.dir(text);
    
        var html = $.parseHTML(text);
        console.dir(html);
    
        //把html附加到body
        $(document.body).append(html);
    });


    自定义数据格式

    json、xml和html都是标准格式,也可以自定义格式。下面返回用(,)分隔的自定义数据格式,相对于json等标准格式,自定义格式不易被理解。

    $.ajax({
        url: 'http://localhost:8280/logweb/test/custom.do',
        dataType: 'text'
    }).done(function(text){
        console.dir(arguments);
        //text的类型
        console.dir('text的类型是:' + Object.prototype.toString.call(text));
        console.dir(text);
    
        var data = {}, items = text.split(',');
        $.each(items, function(i, v){
            var parts = v.split('_');
            data[parts[0]] = parts[1];
        });
    
        console.dir(data);
    });

    自定义

    jsonp

    jsonp并不属于ajax,jsonp和ajax实现的原理不一样,jsonp的出现只是为了弥补ajax不能跨域请求的缺点(ajax不能跨域请求是浏览器做的限制)。虽然jsonp不属于ajax,jQuery为了方便还是把jsonp放在ajax方法里调用,把dataType设置为jsonp即可。

    $.ajax({
        url: 'http://localhost:8280/logweb/test/jsonp.do',
        dataType: 'jsonp'
    }).done(function(data){
        console.dir('data的类型是:' + Object.prototype.toString.call(data));
        console.dir(data);
    });

    jsonp


    jsonp

    服务端

    import java.io.IOException;
    import java.util.Date;
    import java.util.HashMap;
    import java.util.Map;
    
    import javax.servlet.http.HttpServletResponse;
    
    import org.dom4j.Document;
    import org.dom4j.DocumentHelper;
    import org.dom4j.Element;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import com.alibaba.fastjson.JSON;
    
    @Controller
    @RequestMapping("/test")
    public class TestController {
    
        /**
         * 返回json
         * 
         * @param response
         */
        @RequestMapping("/json.do")
        public void json(HttpServletResponse response) {
            response.setContentType("text/plain;charset=utf-8");
            response.setCharacterEncoding("utf-8");
    
            // 构造json
            Map<String, Object> json = new HashMap<String, Object>();
            json.put("date", new Date());
            json.put("name", "小明");
            json.put("age", 18);
    
            try {
                // 这里用FastJSON生成JSON字符串
                response.getWriter().write(JSON.toJSONString(json));
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    
        /**
         * 返回xml
         * @param response
         */
        @RequestMapping("/xml.do")
        public void xml(HttpServletResponse response) {
            response.setContentType("text/plain;charset=utf-8");
            response.setCharacterEncoding("utf-8");
    
            //用Dom4j构造xml
            Document doc = DocumentHelper.createDocument();
            Element root = doc.addElement("root");
            root.addElement("date").setText(new Date().getTime() + "");;
            root.addElement("name").setText("小明");
            root.addElement("age").setText("18");
    
            try {
                response.getWriter().write(doc.asXML());
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    
        /**
         * 返回html
         * @param response
         */
        @RequestMapping("/html.do")
        public void html(HttpServletResponse response) {
            response.setContentType("text/plain;charset=utf-8");
            response.setCharacterEncoding("utf-8");
    
            String html = "<div>" + new Date().toString() + "</div><div>姓名:小明</div><div>年龄:18岁</div>";
    
            try {
                response.getWriter().write(html);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    
        /**
         * 自定义格式
         * @param response
         */
        @RequestMapping("/custom.do")
        public void custom(HttpServletResponse response) {
            response.setContentType("text/plain;charset=utf-8");
            response.setCharacterEncoding("utf-8");
    
            String str = "date_" + new Date().toString() + "," + "name_小明,age_18";
    
            try {
                response.getWriter().write(str);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    
        /**
         * jsonp数据
         * @param callback jsonp的回调函数名称
         * @param response
         */
        @RequestMapping("/jsonp.do")
        public void jsonp(String callback, HttpServletResponse response) {
            response.setContentType("text/plain;charset=utf-8");
            response.setCharacterEncoding("utf-8");
    
            // 构造json
            Map<String, Object> json = new HashMap<String, Object>();
            json.put("date", new Date());
            json.put("name", "小明");
            json.put("age", 18);
    
            //拼接jsonp
            StringBuilder str = new StringBuilder();
            str.append(callback);
            str.append("(");
            str.append(JSON.toJSONString(json));
            str.append(");");
    
            try {
                response.getWriter().write(str.toString());
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
    展开全文
  • ajax返回的数据类型如何选择

    千次阅读 2017-07-28 14:11:23
    数据请求返回的dataType可以是html,也可以是json,但是现在前后端分离的请求,大多返回的是json, 返回json的优势在于服务器端减少了读取模板和渲染的io,在并发的时候,服务器能够快速响应,在同样的时间内可以...
  • 我把一个二维数组当作数据放到ajax中的data:里面,后台却没接收到,不知道是什么原因 另外,怎么在chorme查看前台提交的信息?
  • Jquery ajax请求返回html数据类型

    万次阅读 2018-11-28 13:18:27
    Jquery ajax请求返回html数据类型Jquery ajax 异步请求返回 htmlftl页面代码java代码返回html页面如下 Jquery ajax 异步请求返回 html 本文简述通过ajax传参请求后台获取html页面并渲染。 ftl页面代码 1.代码如下: ...
  • 其原理很简单,结构上基本不变,只是改变处理返回数据的方式.1.... * @function 利用ajax动态交换数据(Text/HTML格式) * @param url 要提交请求的页面 * @param jsonData 要提交的数据,利用Json传递 * @param get
  • 关于ajax传数据到后台

    千次阅读 2018-05-18 10:38:12
    ajax传整个数组到后台:先用JSON.stringify,再在后台用json_decode来接收js:$.ajax({ type:'post', url:'', data:{ s_data:JSON.stringify(arr)}});php:$s_data = input('post.s_data');//tp5写法$the_data = ...
  • 一般地,出现这种情况很大一部分原因是对ajax中的参数作用不熟悉或者对@RequestBody注解不熟悉。 在jquery的ajax中,如果没加contentType:"application/json",那么data就应该对应的是json对象,反之,如果加了...
  • 爬取Ajax类型数据

    千次阅读 2018-08-28 18:25:57
    爬取Ajax类型数据, 需要用程序模拟Ajax向服务器发送请求, 根据响应内容得到我们想要的数据. 本文以今日头条为例, 作者使用Google浏览器 首先登录今日头条搜索街拍(https://www.toutiao.com/search/?keyword...
  • [Ajax代码](https://img-ask.csdn.net/upload/201612/30/1483069719_113660.jpg) ![网页的报错内容](https://img-ask.csdn.net/upload/201612/30/1483069738_268798.jpg) ![loginCotroller代码以及输出结果]...
  • 最近学了node,对于post请求的数据都是用body-parser中间件进行处理,但是今天用ajax传数据的时候发生了错误,错误如下: 过来的值直接被解析成一个key,改了好久才解决,所以把这个问题记录一下1.form表单提交时...
  • ajax传数据及后台接收

    千次阅读 2019-06-21 16:55:19
    之后可以根据具体数据类型进行转译 如上图可以知道这是一个数组 每个数组可以解析成一个 bean List<Customized> list1 = new ArrayList(); // 先把json 字符串转换为json 数组 JSONArray jsonArray1 =...
  • 这一节讲ajax利用json数据类型与php后台交互 其实要注意的是jquery的$ajax()的参数data和dataType data:是前端给php后台的数据; dataType:是php后台回调成功返回给前端的数据类型; 这里W3Shcool的一些...
  • ajax传数据和图片(base64格式)

    万次阅读 2016-07-24 22:48:14
    讲了一下ajax的用法(原生js版),以及如何在前端获取图片,以base64的形式用ajax传给后台,和后台解析图片保存。 感觉自己写的还是挺通俗易懂的~
  • 的MDN全名容易理解他是什么意思:MDN Web Docs   好了,自行学习,上一篇讲了jquery的$.ajax()...那么从MDN上了解到,原来html5中表单数据除了用json数据类型给后台,还可以用FormData数据类型来进行传递...
  • springmvc+maven+spring data jpa:ajax异步提交,接收返回的数据时,dataType:"html"。controller返回的是ModelAndView
  • 因为平时常用的设置,所以突然被问起来会忘,一般我们ajax是直接利用jQuery的ajax方法,里面的接口直接调用,常用的主要有: url 类型:String 默认值: 当前页地址。发送请求的地址。 type 类型:String 默认值:...
  • jQuery.ajax({ url:"×××", dataType:"html", async: true, type: "post", success: function (data){ var aa=$(data).find('#id的名字').val(); alert(aa); } });
  • jsp用ajax向后台传数据的格式

    千次阅读 2015-09-02 15:03:25
    $.ajax( { url: "test.action", async:true, cache:false, type:'post' dataType:'text', data:{ 参数名:值, 参数名:值 },//这里就需要{a:aValue} success:function(json){ //成功后调用 var obj = $....
  • 前台ajax代码如下: for (var key in map) { alert("size of map:" + Object.keys(map).length); alert("map["+key+"]:"+ map[key]); } alert("转化
  • 接收 yyyy-MM-dd 类型,在对应的实体类中加入注解 @DateFormat(pattern="yyyy-MM-dd HH:mm:ss") 接收 yyyy-MM-dd HH:mm:ss ,在对应的实体类中加入注解 @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss&...
  • $.ajax({ type:"POST",//提交请求的方式 url:"/interface/servlet/paypay",//访问servlet的路径 dataType:"json",//没有这个,将把后台放会的json解析成字符串 data:$('#pay_submit').serialize(),...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 202,800
精华内容 81,120
关键字:

ajax可以传的数据类型