通过Ajax进行Post提交Json数据的方法,ajax请求传过来的json数据直接转成对应的实体类时出错

js代码

 

getJson()方法 – 可以实现跨域提交

1.什么叫做跨域

  • 跨域:完全跨域 – IP不同

  • 域名:

  • 顶级域名 –
    http://www.baidu.com

  • 二级域名 –
    http://www.baidu.com/kongjian

  • 万维网协议:

  • 默认是不允许跨域请求的

  • 服务器那边返回的是一个函数字符串

      $.getJson("url?callback=?",function(data){
     })
    

2、data中,将json对象序列化。使用JSON.stringfy()函数或者双引号形式的字符串。

       1、我的解决办法就是把实体类的javabean里边的类型都改成string类型了,在配置SQL语句时用数据库函数to_date或者to_number转化的,如果再Java中用到这个字符串类型的日期的话,有必要的话,就用For
format=new SimpleDateFormat(“yyyy-MM-dd”),format.parse()来转换。

Ajax的XML

1.请求的数据格式-XML

  • 客户端如何构建XML格式的数据

  • 构建的数据类型 – 字符串类型

  • 字符串的内容要符合XML格式的语法要求

  • 服务器端如何接受符合XML格式的数据
    接收到的客户端的请求数据 – 字符串类型,php集成了DOM的相关内容

    DOMDocument
    DOMElement
    DOMNode
    

    2.响应的数据格式-XML

  • 服务器端如何构建符合XML格式的数据

  • 设置服务器端的响应头Content-Type值为text/xml
    header(“Content-Type:text/xml”);

  • 构建符合XML格式的数据内容
    DOMDocument对象的方法
    loadXML(符合XML格式的字符串)
    saveXML()方式进行响应

  • 客户端如何接受XML格式的数据

  • 使用XMLHttpRequest对象的responseXML属性接收

  • 接收到的就是XML DOM对象(不需要进行解析)

3、调试的一个技巧,有时候json变量和实体类相对复杂时提交老是报415或者400的错误又找不到原因,可以将Action中的实体类换成JSONObject
看看能不能接收到参数,@RequestBody JSONObject
requestJso,接收后在JSON系列化到实体类。有次就是因为json变量向实体类转换时发生字符向数字转换的错误。

       
今天开发过程中,在SpringMVC中的Action中处理前台ajax请求传过来的json数据直接转成对应的实体类时出错:400
Bad
Request,后台也不报错,400指的的是请求无效(请求有语法问题或者不能满足请求)。

ajax中的json格式

1.请求格式为json

  • 客户端向服务器端发送请求为json格式的数据

  • 构建符合JSON格式的字符串

  • 定义字符串时,保证里面使用双引号,外面使用单引号

  • 服务器端接受json格式的数据

  • 使用json_decode()函数进行解析

  • json_decode($json,true);ture代表是否转换为数组

2.响应格式为json

  • 服务器端向客户发送响应为json格式的数据
  • 手工方式构建json格式的字符串
  • 使用json_encode()函数将php变量(数组),转换成复合json格式的字符串
  • 客户端接受json格式的数据
  • 使用XMLHttpRequest对象的responseText属性接受
  • 然后使用eval函数进行转换,如果使用()包裹,eval函数强制转换为js代码,
    var json = eval(“(“+data+”)”);

注意事项:

       4、最后还有一种方法,就是实体类的日期属性上加@DateTimeFormat(pattern=”yyyy-MM-dd”)注解,大部分是可以成功使用的。如果这种方法不可用的话,你看继续尝试如下方法:不过这个前提是前台穿过的日期为json形式而非字符串形式,如前台类似$(“#id”).val()来获取日期直接传给后台的话是不行的,你需要在前台引入JSON官网的json.js库或者引入jQueryjquery.json-2.4.js库,然后如果是前者的话就new
Date(stringDate).parseJSON()来转化再传给后台,如果是后者的话,$.toJSON(new
Date(stringdate))来传给后台,这种方式比较麻烦,有网友留言特意讨论了一下这个问题,所以建议采用第一种方式。

load(url,data,callback)方法

1.最简单、局限性最大

  • url – 设置ajax的请求地址
  • data – 设置ajax的请求数据
    要求为key:value格式,其实就是js的对象格式
  • callback: ajax请求成功后的回调函数
    回调函数的参数就是服务器返回的数据

2.服务器响应的数据自动写入调用load方法的属性中
3.load()方法的请求类型

  • 没有请求数据时,请求类型是GET
  • 发送请求数据时,请求类型是POST

4.load()方法接受服务器端的响应数据
是以字符串类型(HTML格式)来接受

Action代码

(6)如果是传了非实体bean属性的参数过来也会发生这种情况

表单的Ajax异步提交 –

1.表单的序列化

  • serialize() 返回的是json字符串
    使用表单元素的name属性值
    {key:value}

  • serializeArray() 返回的是json对象
    json对象由一个对象数组组成
    [obj1,obj2,obj3,…]

  • 注意:
    表单必须要有name属性

  1. jQuery.form插件
  • 实现表单的异步提交,底层机制,还是使用正常的表单提交机制

  • 两个核心方法 – 参数既是一个option参数

  • ajaxForm(options)方法
    ajaxForm()不能提交表单。在document的ready函数中,使用ajaxForm来为
    AJAX提交表单进行准备。提交动作必须由submit开始

  • ajaxSubmit(option)方法
    ajaxSubmit()马上由AJAX来提交表单。你可以在任何情况下进行该项提交。

  • 参数

  • target 服务器返回内容所存放的元素ID

  • beforeSubmit 提交前回调函数,如果返回false,则不提交

  • success 提交后的回调函数,一般有两个参数responseText,statusText

  • url 默认是form的action,如果声明,则覆盖

  • type 默认是form的method,如果声明,则覆盖

  • dataType html(默认),xml,script,json….接受服务端返回的类型

  • clearForm 布尔值,成功提交后,是否清除所有表单元素值

  • resetForm 布尔值,成功提交后,是否重置所有表单元素值

  • timeout 限制请求时间,大于该时间后则跳出请求
    http://www.cnblogs.com/popzhou/p/4338040.html

3.表单异步提交的方式

  • 不使用submit按钮,而是使用button按钮,通过绑定click事件,实现提交
  • 表单的序列化
  • 表单的异步提交
  • (常用)依旧使用submit事件,在form元素中绑定onsubmit事件,在onsubmit事件的处理函数中要做如下事情
  • 表单的序列化
  • 表单的异步提交
  • Web前端,组织表单的默认行为
$.ajax({ 
      type : "POST", 
      url : js_path + "/maintainAdd/add", 
      data : JSON.stringify(madd_data.editMaintain), 
      contentType : "application/json", 
      dataType : "json", 
      complete:function(msg) { 
        layer.msg("报修成功",{time:2000}); 
        layer.close(madd_data.w_c_index); 
      } 
    }); 

       3、在就是还有一种方法就是在对应的实体类的对应的非字符串类型的变量的setter方法中传入string类型的,然后在里边用SimpleDateFormat或者Integer进行转化。

HTML(文本)、XML格式、JSON格式的优缺点

  • HTML: 简单,但解析复杂
  • XML: 构建、解析复杂
  • JSON: 轻量级

1、ajax中,contentType: “application/json”是必须的。dataType:
“json”是表示返回值是json格式,依据返回值类型而定。

       2、其实还可以在实体类中定义Date和int类型对应的字符串类型成员变量,这样前台的表单中field或者name与之对应上即可,这样也成功转成实体类了,不过转成之后,得在java中把它字符串类型的转成对应的Date或者int类型赋给相应的成员变量即可。

jQuery中的ajax

1.封装第一层 – 类似于原生ajax的用法

$ajax:
var data = {
  name:"jj",
  site:1
}
$.ajax({
  url:"myPhp04.php",
  type:"post",
  data:data,
  success:function(data,textStatus){
    console.log(textStatus);
    console.log(data);
  },
  error:function(){
  },
  dataType:"json",
})

2.封装第二层 – 基于第一层再次封装

  $().load(); 
  $.post();

3.封装的第三层 – 特殊用法

  $.getScript(); - 动态读取脚本(js代码)
  $.getJson();  - 接收json格式数据
 @ResponseBody 
  @RequestMapping(value = "/add",method = RequestMethod.POST) 
  public void addMaintain(@RequestBody Maintain maintain){ 
    this.save_maintain(maintain); 
  } 

        出现这个错误的原因一般最常见的就是后台的实体类bean与前台穿过的类型不匹配,我的就是,因为的javabean中有定义了Date类型和int类型的成员变量,导致转化器在把json数据转化成bean时不能转化,其实如果用JSONObject.toBean方法转化时,这种情况也会报错的。

使用$.getScript(url,calback)动态读取脚本

1.若JS代码过多时,会影响HTML页面加载的速度,如果已被加载的JS代码并不是立即执行,只加载马上执行的js代码,会提交效率
2.参数

  • url – 读取脚本的地址(本地或服务器)
  • calback – 回调函数

以上这篇通过Ajax进行Post提交Json数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

(5)前台传参时参数的顺序与后台实体类的各个属性的顺序不一致(我试了试,我的顺序改变无影响)

$.ajax(options)方法

1.options的格式是{key:value}
2.url:请求地址

  1. type:请求类型,默认为get

  2. async:是否异步,默认为true
    5.contentType POST方式发送数据的前提
    默认值为application/x-www-form-urlencoded
    6.data:请求数据,格式必须为key=value
    7.success:请求成功后的回调函数

     function(data,textStatus)
       data - 服务器响应的内容
       textStatus - 表示ajax请求的状态,此时的值为success
    

8.error:请求失败后的回调函数

    function(XMLHttpRequest,textStatus,errorThrown)
      XMLHttpRequest - ajax的核心对象
      errorThrown - 错误异常信息
      textStatus - 表示ajax请求的状态
      error/timeout/notmodified

9.dataType:数据响应格式
HTML/XML/JSON

您可能感兴趣的文章:

  • AJAX跨域请求json数据的实现方法
  • jQuery向webApi提交post
    json数据
  • $.ajax json数据传递方法
  • jQuery向后台传入json格式数据的方法
  • 浅析ajax请求json数据并用js解析(示例分析)
  • Javascript
    详解封装from表单数据为json串进行ajax提交

       如果你有更好的更优秀的方式解决这种问题,还请您手下留情,留下您的宝贵意见,以使大家共同的学习和成长。

get/post()方法

1.get(url,data,callback,type)

  • 参数
  • url – 设置ajax的请求地址
  • data – 设置ajax的请求数据
    要求为key:value格式,其实就是js的对象格式
  • callback: ajax请求成功后的回调函数
    回调函数的参数就是服务器返回的数据
  • type:设置服务器端响应的数据格式
    默认值为HTML,还可以为xml/json
  • 无论是否发送请求数据,请求类型都是GET
  • $.get()方法可以接受HTML/XML/JSON格式

2.post(url,data,callback,type)
使用方式跟get一模一样

       网上我看了一些有关问题,看网友们还有一些其他原因导致这个错误的,特总结归纳了一下方便网友们参考:

json

1.JSON – javascript object notation(JS原生支持)
2.json数据格式源于js
3.特点:

  • 易于程序员阅读和编写
  • 易于计算机解析和生成
  • json是目前网络上使用最广泛的数据格式之一
  • Array和Object
  • 支持的数据类型
  • 字符串、数值、布尔值、对象、数组、null

(1)log4j的配置文件里错误将部分log打为Info级别所致
(2)传参数的时候,参数名使用了关键字“name”(我试了试,我的没报错正常)
(3)本来要返回json的却忘了加@RequestBody
(4)ajax请求的连接后边忘了加参数