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

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

1<!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都有一些了解。下面我们进行很亲民化 的代码。 2 3<%-- 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="https://my.oschina.net/js/jquery.js"></script><script type="text/javascript" src="https://my.oschina.net/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("成功") } } }) }; 4 5接下来我们看一下后台是如何把值传回给ajax,以及接受ajax穿的值。 6 7@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对象输出指定格式的数据。

1 在做后提一下传值为时间格式的时候,要引入标签库。 2 3<%--将date类型,转为字符串--%><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>代码要用fmt阔上。 4 5<fmt:formatDate value="${user.birthday}" pattern="YYYY-MM-dd HH:mm:ss"></fmt:formatDate>
点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

java将前端的json数组字符串转换为列表

记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang