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>

固定格式,不要出错。

目录
相关文章
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
307 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
JavaScript
可自由配置的jQuery消息提示框插件toast
jquery.toast.js是一款可自由配置的jQuery消息提示框插件。该消息提示框可以自定义背景和前景色,提示框的位置,提示框的显示时间,提示框的动画效果等。
563 2
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
775 1
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
237 1
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
183 1
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
1083 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
312 5
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
277 0
|
JavaScript 前端开发
Ajax的使用(jquery的下载)
这篇文章是关于Ajax学习笔记的分享,包括JQuery的下载方式、Ajax的主要参数说明,以及如何在网页中使用Ajax进行异步请求的示例代码。