前端与后台之间的数据传递（3-2）

最新推荐文章于 2021-06-18 09:48:54 发布
最新推荐文章于 2021-06-18 09:48:54 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： JavaWeb学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangjinhuang/article/details/24471795
版权

2）通过$.post()方法返回数组

在实际的开发中往往会遇到需要返回复杂数据类型的情况，这时，如果继续依靠上面的方法，则很显然已经不能满足我们的需求了，所以接下来将进行数组的传递。依旧采用上面的例子来作实例，通过数组返回会传递过去的姓名和密码，并显示登录的提示信息。

1）依旧是建立一个用于显示登录的login.html页面，具体实现代码如下：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>登录界面</title>

<script language="JavaScript" src="../jQuery/jquery1.8.2.js"></script>

<script>

$(function(){

$("#submit").click(function(){

$.post(

"../LoginServlet",

{

name:$("#name").val(),

password:$("#password").val()

},

function(data){

alert("解析前的数据为"+data);

var value = JSON.parse(data);

alert("解析后的数据为"+value);

var name = value[1];

var password = value[2];

if(value[0]=="success"){

alert("登录成功"+"\n"+"姓名="+name+"\n"+"密码="+password);

}

if(data[0]=="failure"){

alert("登录失败");

}

},

"html"

);

})

})

</script>

<style>

body{width:300px; height:200px; margin:0 auto;}

fieldset{ width:300px; }

table{ width:300px; height:100px;}

</style>

</head>

<body>

<fieldset>

<legend>登录界面</legend>

<form method="post">

<table>

<tr><td>姓名:</td><td><input type="text" name="name" id="name"/></td></tr>

<tr><td>密码:</td><td><input type="password" name="password" id="password"/></td></tr>

</table>

<input type="button" value="提交" style="margin-left:66px; width:70px;" id="submit"> 

<input type="reset" value="重置" style="width:70px;"/>

</form>

</fieldset>

</body>

</html>

2）建立一个用于接收参数的Servlet类型的LoginServlet.java，在这里需要导入几个包，具体实现代码如下：

package zjh.javaee.servlet;

 

import java.io.IOException;

import java.io.PrintWriter;

 

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import com.google.gson.Gson;

import com.google.gson.JsonArray;

 

 

@WebServlet("/LoginServlet")

public class LoginServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

       

    public LoginServlet() {

        super();

    }

 

 

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

this.doPost(request, response);

}

 

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//解决乱码问题

request.setCharacterEncoding("UTF-8");

response.setCharacterEncoding("UTF-8");

//接收请求的参数

String userName = request.getParameter("name");

String userPassword = request.getParameter("password");

PrintWriter pw = response.getWriter();

String str = "";

//判断是否为空，如果不为空，则将姓名传递到show.html页面中

if(userName.equals("")||userName==null||userPassword.equals("")||userPassword==null){

str = "failure";

}else{

str = "success";

}

Gson gson = new Gson();

JsonArray array = new JsonArray();

array.add(gson.toJsonTree(str));

array.add(gson.toJsonTree(userName));

array.add(gson.toJsonTree(userPassword));

pw.print(array.toString());

}

 

}

 

 

3）运行结果如下所示：

解析前的数据为：


 

解析后的数据为：

 


 

 

 

 

 

 

最终结果为：


zhangjinhuang
关注
专栏目录
MVC框架中的前端与后端数据传递及实例
明中明
07-05 1万+
一、MVC框架 MVC代表Model、View、Controller，即模型、视图、控制器。其中： View(视图):就是人机交互界面，可以给用户显示业务逻辑数据，同时也可以 接收用户输入的数据。 Model(模型):程序的业务数据和业务逻辑处理部分，Model提供视图的显示数据，且一个Model能为多个视图提供业务数据，因此Model也增加了代码的复用性。 Controlle(控制器):...
java后台如何给数据给前端_JAVA后台 关于如何从后台传递信息在jsp前端页面显示...
weixin_35097945的博客
02-23 3012
JAVA后台 关于如何从后台传递信息在jsp前端页面显示首先，博主今天为了将后台的信息传递到前台，废了不少的脑筋，一开始，博主采用了request.setAttribute()的方法，来实现的，具体代码如下：在servlet中，写上：request.setAttribute(“name”, loginUser.getAccount());//这里的意思可以理解为将loginUser.getAcco...
前端与后端之间的数据传递
qq_55342245的博客
04-01 1万+
前端与后端之间的数据传递前端页面页面结构index.html 代码后台服务新建【Dynamic Web Project】项目结构Servlet文件解决跨域问题效果展示JSONObject与HashMap一起传用JSONObject用HashMap传递的主要部分 前端页面 前端我用了VUE，开发工具是HBuilder X。直接在用后端的开发工具，如IDEA 、eclipse，STS写前端页面也是可以的，只不过编程时貌似没有输入提示（这对于英文不好的程序员，这很致命）。 页面结构 两个js包需要下载， ind
web前端与后台数据交互
张永胜
07-13 1万+
转载自：https://blog.csdn.net/sunshao904/article/details/731359761.前端请求数据URL由谁来写?在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数，这里的查询参数也就是URL请求的参数。2.接口文档主要由谁来写?接口文档也是主要由后台开...
前端与后台之间的数据传递（3-1）
随缘
04-25 5391
通过$.post()方法进行数据的传递 1）通过$.post()方法返回简单数据 $.post()方法的格式如下： $.post(    url ,  //这里的url指的是要跳转到的目标页面    data,  //这个data指的是要传递的参数，格式为key/value    function(data){  //这个是返回函数，里面的参数是返回的值      
前后端信息传递方法
mengxiao12345678的博客
06-18 388
目前，我只学到了两种，一种是通过url传递参数，一种是通过POST请求传递参数。 举例：比如某参数id，不想在页面显示，但是想传递给后端。方法： 一. 通过POST html中： <form method = 'POST', action="/modifyClass/"> <p><input style="display:none" name = "classID" value = {{ result.0.0}}></input>&lt
前端和后端之间传输数据
艾米栗的代码天地
02-10 2456
在项目练习过程中，提到了从后端获取数据。 1.其中使用了fast-mock来模拟后端 1.1 fast-mock是什么 https://www.jianshu.com/p/3d02ada2c540 1.2 前后端分离的意义 https://www.cnblogs.com/skaarl/p/9658114.html 2. ajax和axios 2.1 通过axios进行数据传输 ...
SpringMVC实现前端后台交互传递数据
08-31
为了将数据传递到页面，我们需要在页面上使用与User对象的属性名相同的表单域名。 4. 使用ModelAndView传递数据 在data3方法中，我们使用ModelAndView来传递数据： ```java @RequestMapping("/data3") public ...
前端VUE权限管理（包含菜单权限和按钮权限），router.addRoutes根据后台接口传递数据生成动态路由
08-15
VUE-router.addRoutes根据后台接口传递数据生成动态路由，前端拿到配置并生成侧边栏-实现页面级权限控制。 ----------------------------------------------- 登陆成功之后直接由后端返回异步路由表，然后前端直接...
layui之数据表格--与后台交互获取数据的方法
10-16
3. 后台接收前端发送的分页参数，查询数据库并返回数据。 4. 前端接收到数据后，layui自动更新表格内容。 通过这种方式，我们可以实现动态加载和分页显示数据，提高了用户体验，同时也简化了前后端的交互过程。
前后端分离中axios的post请求问题
weixin_43160956的博客
11-27 1078
axios中post请求问题 描述 在axios的post请求中传参时java后端无法获取值 例如前端如下 form 是一个对象 里面保存有登录名、密码、用户类别 form: { username: '123', password: '123', type: '1' } const { data: res } = await this....
用户注册信息验证功能（前端+后台）
Aimee_ice的博客
11-10 2万+
一、写在前面罗里吧嗦的话 最近在写自己的第一个个人项目，开始写了很久了，但是每天没啥时间记录，趁着周末先记录一些思路和踩过的坑。 项目预计是做一个关于家装的电商网站，样式参考自土巴兔网站（我不是打广告！）。目前写了几个静态页面，写得有点审美疲劳，遂决定写一写后台JS换换心情~ 之前听师兄说登录注册俩小时就能搞定，想一想不如就先写登陆注册吧，反正用不了多久。好吧，事实光速打脸了，我怎么就把自己...
如何实现前端和后台之间的数据交换
qq_27474555的博客
01-21 1593
1. 对vue项目进行配置（前端以Vue为例） config/index.js中配置 proxyTable: {       '/user':{         target:'http://127.0.0.1:9001',         pathRewrite:{           '^/user':''         }       }     }, 2、对后台添加CorsConfig（...
后台与前端的联系
li1367356的博客
10-28 1935
1：前端和后台的关系后台给管理人员看，向数据库中添加数据，前端从数据库中取数据，两者相连接的点就是数据库
JAVA前端与后端参数传递方法小结
Andrew_Yuan的博客
04-19 1万+
一.Servlet后端传值给前端 使用一些Servlet API进行值的存取操作：HttpServletRequest、HttpSession和ServletContext。Struts2对这个三个对象用Map进行了封装，我们就可以使用Map对象来存取数据了。 　　 1)在Action中存值 ActionContext actionContext = ActionContext.getC...
前端和后端是如何交互的
热门推荐
张俊辉
11-18 4万+
1、前端请求数据URL由谁来写 在开发中，URL主要是由后台来写好给前端。 若后台在查询数据，需要借助查询条件才能查询到前端需要的数据时，这时后台会要求前端提供相关的查询参数（即URL请求的参数）。 2、接口文档主要由谁来写 接口文档主要由后台设计和修改。 后台直接跟数据打交道，最清楚数据库里有什么数据，能返回什么数据。 前端只是数据的被动接受者，只是接口文档的使用者。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值