jQuery封装Ajax,SpringMVC使用Ajax的配置

简介: jQuery封装Ajax,SpringMVC使用Ajax的配置

上一遍已经讲了使用原生js开发Ajax,熟悉其原理再来学jQuery封装好的就容易多了,

Jquery中已经封装好$.ajax()方法,我们可以直接调用,具体的属性含义可以参考jquery手册。

jQuery使用Ajax的具体步骤:

1.引用jquery源码

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.1.js"></script>

2.自己的调用的方法

  <script type="text/javascript">
      //光标从文本框中移出的时候做的事情
      function doAjax(){
        $.ajax({
            type:"get",
            url:"${pageContext.request.contextPath}/user/regist.do",
            data:"name="+$("#username").val(),
            success:function(data){
                if(data=="1"){
                    $("#mess").html("可以使用");
                }else{
                    $("#mess").html("不可以使用");
                }
            }
        });
      }
    </script>
  </head>
  <body>
  <form>
    用户名:<input type="text" name="username" onblur="doAjax()" id="username"/><span id="mess"></span><br/>
    密码:<input type="password"/><br/>
    <input type="submit"/><br/>
  </form>
  </body>

这样就发送了一个Ajax请求,但是服务器端如果传过来的不是0和1,而是对象呢,这就需要我们


在服务器端把对象转换成JSON字符串。


1,首先要引入阿里的fastjson.jar包。,

2,再调用json的toJSONString方法就可以将一个对象转换成json字符串:

如下所示:

3,对象属性的控制,常用的两个注解,忽略某个属性和日期格式转换

如下所示:

public class Comment {
  //转换为json对象时,忽略这个属性
  @JSONField(serialize = false)
    private int id;
    private String content;
    private String username;
    //用在日期属性上,转换为json时,按照这个格式转换
    @JSONField(format="yyyy-MM-dd")
    private Date date;
}

SpringMVC和ajax的集成

引入jar包fastjson.jar,阿里的一个将java对象转换为json格式的字符串。

对控制器类中的方法进行调整。

老的方式

Public void xxx(HttpServletResponse response){

Out.print(json);

}

新的方式

Public Comment xxx(){

Return comment;//把要转换为json格式的对象直接返回。

}

在方法上面添加注解

@ResponseBody//该方法的返回值要转换为json字符串

Public Comment xxx(){

Return comment;//把要转换为json格式的对象直接返回。

}

如下所示:返回json对象@ResponseBody一定要加,不要忘了

   @RequestMapping("/add2")
    @ResponseBody//表示这个方法返回值是一个json对象
    public Comment add2(Comment comment) {
        comment.setUsername("macw");
        comment.setDate(new Date());
        //调用业务类保存到数据库。
        System.out.println(comment);
        return comment;
    }

4.springmvc的配置文件中设置启用fastjson。必不可少的一步:

  <!-- 开启注解 -->
    <mvc:annotation-driven>
        <!-- 使用fastjson将java对象转换为json对象 -->
        <mvc:message-converters>
            <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter4">
                <property name="supportedMediaTypes">
                    <list>
                        <value>application/json;charset=utf-8</value>
                    </list>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

固定格式,不要出错。

目录
相关文章
|
1月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
82 1
|
2月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
32 1
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
2月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
21 1
|
3月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
32 0
N..
|
6月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
67 1
|
6月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
68 0
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
143 0
|
6月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
5月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
45 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]