公司网站建设需要要求什么软件,谁可以做网站,网站首页设计风格,营销型网站建设答辩异步传值
第一种呢#xff0c;也是最简单的一种#xff0c;通过get提交方式#xff0c;将参数在链接中以问号的形式进行传递
// 前台传值方法
// 触发该方法调用ajaxfunction testAjax(yourData) {$.ajax({type: get, // 以get方式发起请求url: /yo… 异步传值
第一种呢也是最简单的一种通过get提交方式将参数在链接中以问号的形式进行传递
// 前台传值方法
// 触发该方法调用ajaxfunction testAjax(yourData) {$.ajax({type: get, // 以get方式发起请求url: /yourUrl?yourDataName yourData, // 将你的请求参数以问号拼接到url中进行参数传递success(data) {// data为返回值// 成功后的回调方法}})}
// 后台接值方法RequestMapping(/yourUrl)ResponseBody
// RequestParam(yourData)是必不可少的因为他指定了链接中的参数名称public String yourUrl(RequestParam(yourData) String yourData) {System.out.println(yourData);// 返回值可以自由定义return SUCCESS;} 第二种呢是将参数体现到链接中在后台通过占位进行传递。
// 前台传值方法其实大体与上方相同只需注意url即可
// 触发该方法调用ajaxfunction testAjax(yourData) {$.ajax({type: get, // 以get方式发起请求url: /yourUrl/yourData, // 将你的请求参数拼接到url中进行参数传递success(data) {// data为返回值// 成功后的回调方法}})}
// 后台接值方法RequestMapping(/yourUrl/{yourDataName})ResponseBody// 同样PathVariable(yourDataName)必不可少因为他指定链接中某个位置代表着名为yourDataName的变量public String yourUrl(PathVariable(yourDataName) String yourData) {System.out.println(yourData);// 返回值可以自由定义return SUCCESS;} 第三种呢通过post提交方式将form表单中的数据序列化后传递到后台 // 前台传值方法function testAjax() {$.ajax({type: post, // 以post方式发起请求url: /yourUrl, // 你的请求链接data:$(#myForm).serialize(), // 对id为myForm的表单数据进行序列化并传递到后台success(data) {// data为返回值// 成功后的回调方法}})} // 后台接值方法RequestMapping(/yourUrl)ResponseBody// 在这里我假设大家表单数据与User实体类相对应public String yourUrl(User user) {System.out.println(user.toString());return SUCCESS;}
第四种呢就是Ajax异步传值最常见的在ajax方法体中使用data进行传值 // 前台传值方法function testAjax() {$.ajax({type: post, // 以post方式发起请求url: /yourUrl, // 你的请求链接data: { // 提交数据username: admin, // 前者为字段名后者为数据password: admin},success(data) {// data为返回值// 成功后的回调方法}})} // 后台接值方法RequestMapping(/yourUrl)ResponseBody// 在这里我假设大家表单数据与User实体类相对应public String yourUrl(RequestParam(username) String username, RequestParam(password) String password) {System.out.println(usernameusername;passwordpassword);return SUCCESS;} 后台往前台传值就要简单一些单个数据或者封装数据可以直接使用return返回json数据给前台如果是多个数据可以使用PrintWriter进行传值具体操作如下
PrintWriter out response.getWriter();
try {out.write(yourWillReturnData);
} catch (Exception e) {e.printStackTrace();
}finally{out.close();
}
// 无论通过那种方式只需在前台Ajax得success回调方法中对数据进行处理即可,我们以user为例
success(user){alert(返回的用户名为:user.username!!!密码为:user.password);// 在浏览器控制台打印结果点击f12可以查看console.log(返回的用户名为:user.username!!!密码为:user.password);
}
非异步方式传值
1.与异步方式类似使用form直接提交或者在链接中拼接参数即可
!-- form表单提交 --
form idmyForm classlayui-form action/yourUrl methodpostinput typetext nameusername required placeholder邮箱/input typepassword nameusername required placeholder密码/button typesubmit classlayui-btn登录/button
/form
!-- a标签拼接参数 --
a href/yourUrl?youDataNameyourData问号传递参数/a
a href/yourUrl/yourData拼接链接传递参数/a
2.后台接受参数方式不变与异步方式完全相同。 // 1.可以通过session进行参数传递RequestMapping(/yourUrl)public String yourUrl(HttpServletRequest request) {// 通过request获取session然后向session中放入参数key-valuerequest.getSession().setAttribute(yourDataName, yourData);// 跳转到你的视图return /yourViews;}// 2.可以通过Model进行参数传递RequestMapping(/yourUrl)public String yourUrl(Model model) {// 向model中加入参数key-valuemodel.addAttribute(yourDataName, yourData);// 跳转到你的视图return /yourViews;}// 3.同样可以用request进行参数传递RequestMapping(/yourUrl)public String yourUrl(HttpServletRequest request) {// 通过request放入参数key-valuerequest.setAttribute(yourDataName, yourData);// 跳转到你的视图return /yourViews;}
EL表达式怎么用为什么EL表达式不起作用页面展示为${dataName} !-- 我们在这里以c标签的for循环为例做演示 --
!-- 首先导入c标签 --
% taglib prefixc urihttp://java.sun.com/jsp/jstl/core %
!-- 编写foreach循环--c:forEach items${userList} varuserinput typetext nameusername value${user.username}/input typetext namepassword value${user.password}//c:forEach
异步请求完成后如何进行跳转
1.首先要明确如果你的视图层全部放在WEB-INF中那么你的视图层是无法直接进行跳转的也就是说你不能由一个jsp跳转到另一个jsphtml同理。springboot项目也是一样如果你是springboot项目推荐使用thymeleaf模版引擎。
2.如果你希望在回调成功之后进行页面跳转可以通过如下代码实现
// 前台代码
success(user){alert(返回的用户名为:user.username!!!密码为:user.password);// 在浏览器控制台打印结果点击f12可以查看console.log(返回的用户名为:user.username!!!密码为:user.password);// 成功回调后进行跳转window.location.href/youWantToJumpUrl;
} // 后台代码RequestMapping(/youWantToJumpUrl)public String youWantToJumpUrl() {// 跳转到视图层return /youWantToJumpView;// 重定向 return redirect:/youWantToJumpUrl;} 也就是说如果想要跳转页面或者重定向到某一个方法必须经过一次控制层才能实现。 二、 参考链接 ajax异步传值|前后台传值|EL表达式 - 简书 (jianshu.com)
