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

时间:2024-01-04 13:49:32

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

账  户: 
 <input type="text" name="userName" id="userN" placeholder="请输入账户名">
 <br />
 <br />
 <br /> 密&nbsp;&nbsp;码:&nbsp;
 <input type="text" name="passwd" id="userP" placeholder="请输入密码">
 <br />
 <input type="button" value="登录" id="userB">

----------

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

<script type="text/javascript">
 $(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);
 }

</script>

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("<font color='red'>账户名/密码错误</font>");
   return;
  }
 }