zoukankan      html  css  js  c++  java
  • ajax通讯之格式详解

    前言:

    ajax的出现,一定程度上改变了js的命运,同时也被广泛使用,而jq的兴起也大大降低了ajax的使用难度。虽然,jq的ajax方法使用起来十分便利,但是大部分开发人员也仅仅只是对其中的几个属性比较熟悉,当然也包括我。其中用的最多的是url、data、dataType、type、success、error和complete这几个,完整的代码格式如下:

    $.ajax({

      url: '/ajax/getInfo',

      type: 'GET', //或POST

      data: { name: 'jack' },

      dataType: 'json',

      success: function(d){},

      error: function(e){},

      complete: function(){}

    });

    这里我就不一一赘述上面每个属性的意思了,不知道的可以查询jq的API。

    在大部分情况下基本上是不会出问题的,但是遇到一些特殊情况时,后台常常拿不到数据,这是为什么呢?

    正文:

    首先,我们修改一下传输到后台的数据格式

    $.ajax({

      url: '/ajax/getInfo',

      type: 'POST', //这里以POST为例,GET请求的接收方式各不相同所以这里不进行讨论

      data: {

        name: 'jack' ,

        friends: [{

          name: 'rose',

          sex: 'female'

        },{ 

          name: 'lily',

          sex: 'female'

        }]

      },

      dataType: 'json',

      success: function(d){},

      error: function(e){},

      complete: function(){}

    });

    以下说明完全是基于使用框架的接收方式,不涉及自己编写的接收器(如果完全是自己手动编写代码接收的话任意格式数据均能接收)。

    如果是以上形式的数据格式(这里我们将其称为“复杂数据格式”)在JAVA的Spring MVC框架中是无法接收的,同样Nodejs的Express框架也无法接收。

    既然以上的复杂数据格式无法接收,那么我们就需要找到一种能够正确接收的方式。

    经过查阅网上的资料我发现将json数据转换成json字符串,并且在ajax的配置项中加入contentType即可,如下:

    var sendData = 

    {

      name: 'jack' ,

      friends: [{

        name: 'rose',

        sex: 'female'

      },{ 

        name: 'lily',

        sex: 'female'

      }]

    };

    $.ajax({

      url: '/ajax/getInfo',

      type: 'POST', //这里以POST为例,GET请求的接收方式各不相同所以这里不进行讨论

      data: JSON.stringify(sendData),

      contentType: "application/json;charset=utf-8", //默认的contentType为application/x-www-form-urlencoded; charset=utf-8

      dataType: 'json',

      success: function(d){},

      error: function(e){},

      complete: function(){}

    });

    总结:

    如果使用简单的json格式进行POST请求时,我们不需要做什么特殊处理,但是如果要将复杂数据格式传给后台时,我们必须将数据转换成字符串,然后ajax配置项中加入contentType: "application/json;charset=utf-8"。

  • 相关阅读:
    实训9.4.前端:url、href、src,link和@import
    实训9.2.作业1.写一个10次循环,每次得到一个随机数,放进一个集合中,如果这个数已经存在集合中则跳过,最后打印集合中的数字.
    实训9.3. SQL——STRUCTURED QUERY LANGUAGE(结构化查询语言 )
    实训9.2.类集,Collection接口
    实训9.2.IDEA ——java编程语言开发的集成环境(集成开发工具)
    实训9.2. JDK——java语言的软件开发工具包(JAVA的运行环境(JVM+Java系统类库)和JAVA工具) 【java开发的核心】
    从键盘输入数据
    error
    ubuntu 14.04, Command "/usr/bin/python -u -c "import setuptools, tokenize;__file__='
    用Python徒手写线性回归
  • 原文地址:https://www.cnblogs.com/coolle/p/6029577.html
Copyright © 2011-2022 走看看