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>

固定格式,不要出错。

目录
相关文章
N..
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
202 1
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
264 0
|
9月前
|
前端开发 JavaScript
AJax(XHR+Get和Post+AJax的封装)
AJax(XHR+Get和Post+AJax的封装)
262 15
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
214 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
222 22
|
JavaScript
可自由配置的jQuery消息提示框插件toast
jquery.toast.js是一款可自由配置的jQuery消息提示框插件。该消息提示框可以自定义背景和前景色,提示框的位置,提示框的显示时间,提示框的动画效果等。
477 2
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
311 4
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
221 5
|
Java 数据库连接 容器
SpringMVC(四)【SSM 整合、统一结果封装、异常处理、前后台协议联调】(1)
SpringMVC(四)【SSM 整合、统一结果封装、异常处理、前后台协议联调】
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
170 0