Ajax传值以及接受传值，@ResPonseBody 和 @RequestBody

Ajax对于Java编程人员开说可是很重要的，可以说是必会的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--第一步：引入Jquery的地址(相当于下载js源代码，跟引入jar包一样)-->
    <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>

</head>
<body>

<script>
    // 第二步：使用Jquery的 ajax （被封装过的）来请求数据地址
    $.ajax({
        type:'post',
        url:'api/data.json',
        data:{},
        success:function (res) {
            console.log(res)
        }
    })
    // url: 填写的内容的是  后台的数据接口
    // type: 本次发送请求的方式 get/post
    // data: 后台需要前端发送请求的参数，在这里用JSON格式拼接
    // success: 是ajax请求成功时，触发的函数方法  res就是接受到的后台返回的数据
    // 第三步，在success接受后台返回的数据内容



    // 跨域问题：
    $.ajax({
        url:'http://lidongxu.top/Ldx/Ajax_Class/zhejsonp.php',
        type:'get',
        data:{},
        dataType:'jsonp', // JQ已经封装好了跨域请求，只需要在这加一行代码，前段就可以进行跨域请求，但是需要后端的支持
        success:function (res) {
            console.log(res)
        }
    })
</script>
</body>
</html>


看完上面的步骤，以及考虑到跨域问题。相信大家对ajax都有一些了解。
下面我们进行很亲民化 的代码。

<%--
  Created by IntelliJ IDEA.
  User: mac
  Date: 2018/10/26
  Time: 1:57 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>     这里也是引入JQ，方式有很多～

<html>
<head>
    <title>Title</title>
</head>
<body>

<form action="${pageContext.request.contextPath}/user/ajax.do">

    id<input type="text" name="id" id="userId">
    姓名<input type="text" name="name" id="username">
    <%--<input type="button" value="提交" id="btn" onclick="btnAction()"> --%>
    <input type="button" value="提交" onclick="btnAction()">

</form>


</body>
</html>

<script>



//    ajax的url传值形式为{"id":1,"username":"张三",}

    function btnAction(){
        var id = $('#userId').val();
        var username = $('#username').val();

        var d ={"id":id,"username":username};

        // 将对象类型转成字符串
        var  jsnStr = JSON.stringify(d);


        $.ajax({
            type:'post',
            url:'${pageContext.request.contextPath}/user/ajaxTest.do',
            contentType:'application/json;charset=utf-8',           这句话的作用也是很大的啊，可以把值拼在url上
            data:jsnStr,

            success:function (data) {
                alert(data.username);

                if(data.username=="小明"){
                    alert("成功")
                }
            }
        })
    };





接下来我们看一下后台是如何把值传回给ajax，以及接受ajax穿的值。

@ResPonseBody 和 @RequestBody 对于ajax接受值和传值可以很好的两个注解。
既然说到这两个注解，我们就来看看这两个注解的好处把。

@ResPonseBody

1、@RequestBody需要把所有请求参数作为json解析，因此，不能包含key=value这样的写法在请求url中，所有的请求参数都是一个json

2、直接通过浏览器输入url时，@RequestBody获取不到json对象，需要用java编程或者基于ajax的方法请求，将Content-Type设置为application/json

@RequestBody

1、@responseBody注解的作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后，写入到response对象的body区，通常用来返回JSON数据或者是XML

　　2、数据，需要注意的呢，在使用此注解之后不会再走视图处理器，而是直接将数据写入到输入流中，他的效果等同于通过response对象输出指定格式的数据。

 


在做后提一下传值为时间格式的时候，要引入标签库。

<%--将date类型，转为字符串--%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

代码要用fmt阔上。

<fmt:formatDate value="${user.birthday}" pattern="YYYY-MM-dd HH:mm:ss"></fmt:formatDate>