SpringMvc与前台ajax数据传递

本文介绍SpringMVC框架中使用AJAX进行前后端数据交互的方法,包括text与JSON类型的数据交换,以及如何利用@RequestBody和@ResponseBody实现数据的正确传输。

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

前言:

  实际项目开发中,ajax使用很频繁,主要做一些数据验证,数据获取等需求。

1.springmvc+ajax交互方式:

  1.1.text类型数据

    前端:

      

$.ajax({
          url:'${pageContext.request.contextPath}/zy/user/existLoginName',//请求地址
          type:'post',//请求类型
          data:{loginName:$("#loginName").val()},//传入后台数据
          dataType:'text',//后台返回数据类型
          success : function(data) {
         alert("成功!");       }, error:function(data){   alert("服务器异常!"); }
    })

    后台:

@RequestMapping("/existLoginName")
    public void existLoginName(HttpServletRequest request,HttpServletResponse response){
        String zh = request.getParameter("loginName");
        User u = userService.selectUserByLoginName(zh);
        try {
            if(u!=null){
                response.getWriter().write("exist");
            }else{
                response.getWriter().write("ok");
            }
        } catch (IOException e) {
                e.printStackTrace();
        }    
    }

  1.2.json类型数据

    1.2.1.后台@ResponseBody传数据到前台

    前端:

  

$.ajax({
         url:'${pageContext.request.contextPath}/user/existLname',
         type:'post',
         dataType:'json',
         data:{loginName:$("#loginName").val()},
         success:function(data){
            alert(data.msg);
          }
     //注意:这里不能加下面这行,否则数据会传不到后台
        //contentType:'application/json;charset=UTF-8',
 })

    后台:

 @RequestMapping("/existLname")
 @ResponseBody
 public Map<String, String> searchUser(String loginName){
    User u= userService.selectUserByLoginName(loginName);
   Map<String,String> map = new HashMap<String,String>();
   if(u!=null){
    map.put("msg", "no");
    }else{
      map.put("msg", "ok");
    }
    return map;
 }

    1.2.2.后台@RequestBody接收数据

     前端:

     

          $.ajax({
                        url:'${pageContext.request.contextPath}/user/existLname',
                        type:'post',
                        contentType:'application/json;charset=UTF-8',//必须有
                        dataType:'json',
                        data:{loginName:$("#loginName").val()},
                        success:function(data){
                            alert(data.msg);
                        }
                    })

          后台:

    @RequestMapping("/existLname")
    @ResponseBody
    public String searchUser(@RequestBody String loginName){
        User u= userService.selectUserByLoginName(loginName);
        JSONObject jo = new JSONObject();
        if(u!=null){
            jo.put("msg", "no");
        }else{
            jo.put("msg", "ok");
        }
        return jo.toString();
    }

 

     

 

转载于:https://www.cnblogs.com/yixtx/p/8358509.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值