java 后台接收ajax传递的json_ajax提交数据到java后台,并且返回json格式数据前台接收处理值...

本文展示了如何使用JavaScript的Ajax与Java后台进行交互,发送JSON数据并接收处理响应。前端通过jQuery的Ajax方法,以POST方式提交用户名和密码,后台Java接收到参数并查询数据库。如果查询结果不为空,则将用户信息转换为JSON格式并返回给前端,前端通过弹窗提示登录成功并跳转页面。否则,返回错误信息提示账户名或密码错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.前台html页面。有一段代码如下:

账  户: 


密  码: 

----------

在页面引入jquery库(具体可以去网上查)下边是一段js代码:

$(document).ready(function() {

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

var name = $("#userN").val();

var pawd = $("#userP").val();

jQuery.ajax({

type : 'POST',

dataType : 'json',//提交方式是json,也可以是html和text

//dataType:'json' 的意思是URL返回值是以JSON的格式传过来的,然后在页面上解析时就要采取JSON格式来展示。

url : 'servlet/UserInfoAction',//提交到servlet中

cache : false,

data : {

name : name,

pawd : pawd,

},

success : function(data, textStatus) {

//  请求成功时处理

alert(data[0].name);//用这种写法能取出后台传回来的json对象的属性

if (data[0]!=null) {

alert("登录成功!");

var url = getRootPath()+ "/welcome.html";//获取工程路径

//       var url = getRootPath() + "/servlet/showMessAction";

location.href = url;

}

},

error : function() {

alert("账户密码错误!");

}

});

});

});

//这是一段获取项目路径的js方法

//js获取项目根路径,如:http://localhost:8099/UniqueduHome

function getRootPath() {

//获取当前网址,如: http://localhost:8099/UniqueduHome/view/error/notAuthorize.jsp

var curWwwPath = window.document.location.href;

//获取主机地址之后的目录,如: UniqueduHome/view/error/notAuthorize.jsp

var pathName = window.document.location.pathname;

var pos = curWwwPath.indexOf(pathName);

//获取主机地址,如: http://localhost:8099

var localhostPaht = curWwwPath.substring(0, pos);

//获取带"/"的项目名,如:/UniqueduHome

var projectName = pathName.substring(0,

pathName.substr(1).indexOf('/') + 1);

return (localhostPaht + projectName);

}

2.java后台

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

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

//自己写的方法,返回一个实体对象

UserInfo userInfo = userInfoService.getUser(username, password);

if (null != userInfo) {

//向前台输出数据用response.getWriter().print()这种写法

//JSONArray.fromObject(userInfo);转为json数组格式

//也可以返回一个字符串,页面是判断data跟返回的字符串是否相等做逻辑处理

response.getWriter().print(JSONArray.fromObject(userInfo));

} else {

response.setCharacterEncoding("UTF-8");

response.setHeader("content-type", "text/html;charset=UTF-8");

response.getWriter().println("账户名/密码错误");

return;

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值