博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQuery 的Ajax的使用
阅读量:6256 次
发布时间:2019-06-22

本文共 4107 字,大约阅读时间需要 13 分钟。

 

JSON:一种轻量级的数据表示方法,优点:传输方便,占用字节少

XML:一种偏重量级的数据表示方法,优点:格式清晰,占用字节多,大量的字节都浪费在了标签上;

 

网络传输我们常使用json,因为浏览器解析方便;服务器可以利用json工具(比如:fastjson,gson)等快速的将json和java对象进行互转;

一个简单的json格式数据  {“name”:”tom”,”age”:18}

如果上面的数据用xml。可以这么表示

         <user>

         <name>tom</name>

         <age>18</age>

</user>

com.fasterxml.jackson.core
jackson-databind
2.4.2
com.google.code.gson
gson
2.2.4

 

html页面代码

Insert title here
用户名:
密码:

web.xml配置处理的servlet

day06
index.html
hello
com.lamsey.Hello
hello
/hello

servlet的实现类:

public class Hello extends HttpServlet {        private static final long serialVersionUID = 1L;        @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        String name = req.getParameter("name");        System.out.println("name:"+name);        String time = req.getParameter("time");        System.out.println("time:"+time);        //创建json对象,用于把map转换成为json字符串返回        Gson gson = new Gson();         Map map = new HashMap<>();         map.put("name", "limingxian");        String jsonString = gson.toJson(map);        System.out.println(jsonString);        resp.getWriter().write(jsonString);    }    @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        this.doPost(req, resp);    }}

总结:

  ajax与正常的java后台返回不同是,ajax会将返回的数据到data

$(function(){        var url="http://localhost:8080/day06/hello";        var jsonData={ name: "John", time: "2pm" };        var fun= function(data){             alert(data.name);           };         var type="json";        $.post(url,jsonData,fun,type);    });

JSON中两个常用的方法。

 

JSON对象和字符串对象的互转

 

JSON.stringify( json );         此方法可以把一个json对象转换成为json字符串

 

JSON.parse( jsonString );       此方法可以把一个json字符串转换成为json对象

 

2.3、JQuery的Ajax请求(重点****)

 

四个Ajax请求方法

$.ajax方法

$.get方法

$.post方法

$.getJSON方法

 

一个表单序列化方法:serialize()表单序列化方法

 

 

如何使用上面的五个方法:

在JQuery中和Ajax请求有关的方法有四个

$.ajax请求参数

url                                  请求的地址

type :                         请求的方式             get或post

data :                         请求的参数             string或json

success:                    成功的回调函数

dataType:                  返回的数据类型      常用json或text

 

下面的方法必须遵守参数的顺序

$.get请求和$.post请求

url:请求的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式,xml, html, script, json, text。

 

 

Jquery$.getJSON

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

 

表单的序列化

serialize() 方法可以把一个form表单中所有的表单项。都以字符串name=value&name=value的形式进行拼接,省去我们很多不必要的工作。

这样就可以在java里面对值进行获取了。

如果不用serialize(),就要一个个用选择器进行取值后封装为json用ajax传送给java后台

$("#submit").click(function(){            var url="http://localhost:8080/day06/hello";            var jsonData=$("#form01").serialize();            var fun= function(data){                 alert(data.name);               };             var type="json";            $.post(url,jsonData,fun,type);        });
用户名:
密码:

 在使用表单的序列化进行的案例中,用springMVC无法获取参数,后更换为$.ajax();后同时设置contentType="application/json;charset=utf-8"后顺利接收到数据传输。为此分析springMvc的数据绑定流程

$.ajax({                type: "POST",                   url: url,                   contentType : "application/json;charset=utf-8",                   data: jsonData,                success: function(msg){                 alert( "Data Saved: " + msg );               }            });

 

springMVC数据绑定流程:

Spring MVC 框架会将 HTTP 请求的信息绑定到相应的方法入参中,并根据方法的返回值类型做出相应的后续处理。

1)springMVC将servletRequest的对象及目标方法传递给实例WebDataBindFactory后,创建DataBinder 实例对象。

2)DataBinder 调用装配在 Spring MVC 上下文中的ConversionService组件进行数据类型格式转换和数据格式化工作,

 将 Servlet 中的请求信息填充到入参对象中

3)利用Validator 组件对请求消息的入参对象进行数据合法性校验,并最终生成数据绑定结果 BindingData 对象

4) Spring MVC 抽取 BindingResult 中的入参对象和校验错误对象,将它们赋给处理方法的响应入参

 

 

 

转载于:https://www.cnblogs.com/limingxian537423/p/7702725.html

你可能感兴趣的文章
单元测试 模块接口测试
查看>>
洛谷P3371【模板】单源最短路径
查看>>
dedecms---一个简单酷站的构建及解析
查看>>
初识nodeJS
查看>>
HTTP协议
查看>>
3.2 Multi-Master Replication
查看>>
vs调试 LINK : fatal error LNK1104 ...exe
查看>>
陶哲轩实分析 习题 13.4.6
查看>>
DP ZOJ 2745 01-K Code
查看>>
【转载】清华梦的粉碎—写给清华大学的退学申请
查看>>
在ASP.NET MVC3 中利用JSONP跨域登录WEB系统
查看>>
执行计划基础 动态采样
查看>>
课后作业-阅读任务-阅读提问-3
查看>>
26.颜色值缩写
查看>>
内置对象Array及Array常见操作
查看>>
[130_存储业务]002_富士通存储系统Eternus_高级拷贝之对等拷贝(Advanced Copy EC)
查看>>
更改SQL数据库的繁体数据为简体
查看>>
(转)android拨打电话崩溃6.0以上实时动态权限申请
查看>>
懒加载的使用
查看>>
SpringMVC报错The request sent by the client was syntactically incorrect ()
查看>>