发送json 发送对象

发布于：2024-04-30 ⋅ 阅读:(28) ⋅ 点赞:(0)

文章目录

发送json

login.html


<!-- 登录 -->
<!DOCTYPE html>
<html lang="ch">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登陆注册</title>
  <link rel="stylesheet" href="../../css/style.css">
  <script src="../../js/jquery-3.7.0.min.js"></script>
  <script src="../../js/jquery.form.js"></script>
</head>
<body>
<div class="content">


  <div class="form sign-in">
    <h2 class="h2">欢迎回来,果友们！</h2><br/>
    <label>
      <span>电话</span>
      <input type="phone" id="L_phone" name="userName"  />
    </label>
    <label>
      <span>密码</span>
      <input type="password" id="L_pwd" name="userPasswordHash" />
    </label>
    <label class="label">
      <span class="span">短信验证码</span><br>

      <span><input type="text" class="L_note" ></input> </span>

      <button class="L_but" type="button">获取验证码</button>

    </label>
    <button type="button" class="submit" id="submit" >登 录</button>

    <a class="login_fg_a" href="../user/login-pwd.html">忘记密码？</a>
  </div>


  <div class="sub-cont">


    <div class="img">
      <div class="img__text m--up">
        <h1>还未注册？</h1>
        <p>立即注册，尝果味人生。</p>
      </div>
      <div class="img__text m--in">
        <h2>已有帐号？</h2>
        <p>好久不见了！快进入果粒世界。</p>
      </div>
      <div class="img__btn">
        <span class="m--up">注 册</span>
        <span class="m--in">登 录</span>
      </div>
    </div>


    <div class="form sign-up">
      <h2>立即注册,果友们！</h2>
      <label>
        <span>用户名</span>
        <input type="text" id="R_user"/>
      </label>

      <label>
        <span>密码</span>
        <input type="password" id="R_passwors"/>
      </label>

      <label>
        <span>确认密码</span>
        <input type="password" id="R_tpwd"/>
      </label>

      <label class="label">
        <span class="span">短信验证码</span><br>

        <span><input type="text" class="L_note" ></input> </span>

        <button class="L_but" type="button">获取验证码</button>

      </label>

      <a href="" class="mml">
        <button type="button" class="submit" onclick="">注 册</button>
      </a>

    </div>


  </div>
</div>
</div>

<script src="../../js/script.js"></script>



<script>
  $("#submit").click(function (){


    let username = $('#L_phone').val();
    let password = $('#L_pwd').val();

    console.log(username);
    console.log(password);

    let formData = {
      userName: username,
      userPasswordHash: password
    };
    //let formDataSerialized = $.param(formData);
    let formData2 = JSON.stringify(formData)

    $.ajax({
      url: 'http://localhost:80/fshop/user/login', //
      type: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      data: formData2,

      //data: formData,
      //contentType: 'application/x-www-form-urlencoded; charset=UTF-8', // 直接发送对象
      success: function(result) {
        console.log(result)
        if(result.code ==200){
          localStorage.setItem("token",result.data);  // 1.保存token
          window.location.href = "../../index.html";
        }else{
          // $(".login_tip").text(result.data);
        }
      },
      error: function() {
        // $('#response').text('Error occurred: ' + error);
        // 在此处处理 AJAX 请求错误。
      }
    });


  })
</script>
</body>

</html>

UserController


package com.fshop.controller;

import com.fshop.entity.User;
import com.fshop.service.IUserService;
import com.fshop.util.ServerResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

/**
 * <p>
 * 用户表 前端控制器
 * </p>
 *
 * @author dev
 * @since 2024-04-23
 */
@RestController
@RequestMapping("/user")
public class UserController {


    @Autowired
    private IUserService userService;

    @GetMapping("{userId}")
    @ResponseBody
    public User getById(@PathVariable("userId") Integer userId){
        User user = userService.getById(userId);
        return user;
    }



    @PostMapping("login")
    @ResponseBody
    public ServerResult login(@RequestBody User user){
        String userPasswordHash = user.getUserPasswordHash();
        String userName =  user.getUserName();
        System.out.println("contoller层"+userName+userPasswordHash);
        ServerResult result = userService.login(userName,userPasswordHash);
        System.out.println(result);
        return result;
    }
}

发送对象

login.html


<!-- 登录 -->
<!DOCTYPE html>
<html lang="ch">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登陆注册</title>
  <link rel="stylesheet" href="../../css/style.css">
  <script src="../../js/jquery-3.7.0.min.js"></script>
  <script src="../../js/jquery.form.js"></script>
</head>
<body>
<div class="content">


  <div class="form sign-in">
    <h2 class="h2">欢迎回来,果友们！</h2><br/>
    <label>
      <span>电话</span>
      <input type="phone" id="L_phone" name="userName"  />
    </label>
    <label>
      <span>密码</span>
      <input type="password" id="L_pwd" name="userPasswordHash" />
    </label>
    <label class="label">
      <span class="span">短信验证码</span><br>

      <span><input type="text" class="L_note" ></input> </span>

      <button class="L_but" type="button">获取验证码</button>

    </label>
    <button type="button" class="submit" id="submit" >登 录</button>

    <a class="login_fg_a" href="../user/login-pwd.html">忘记密码？</a>
  </div>


  <div class="sub-cont">


    <div class="img">
      <div class="img__text m--up">
        <h1>还未注册？</h1>
        <p>立即注册，尝果味人生。</p>
      </div>
      <div class="img__text m--in">
        <h2>已有帐号？</h2>
        <p>好久不见了！快进入果粒世界。</p>
      </div>
      <div class="img__btn">
        <span class="m--up">注 册</span>
        <span class="m--in">登 录</span>
      </div>
    </div>


    <div class="form sign-up">
      <h2>立即注册,果友们！</h2>
      <label>
        <span>用户名</span>
        <input type="text" id="R_user"/>
      </label>

      <label>
        <span>密码</span>
        <input type="password" id="R_passwors"/>
      </label>

      <label>
        <span>确认密码</span>
        <input type="password" id="R_tpwd"/>
      </label>

      <label class="label">
        <span class="span">短信验证码</span><br>

        <span><input type="text" class="L_note" ></input> </span>

        <button class="L_but" type="button">获取验证码</button>

      </label>

      <a href="" class="mml">
        <button type="button" class="submit" onclick="">注 册</button>
      </a>

    </div>


  </div>
</div>
</div>

<script src="../../js/script.js"></script>



<script>
  $("#submit").click(function (){


    let username = $('#L_phone').val();
    let password = $('#L_pwd').val();

    console.log(username);
    console.log(password);

    let formData = {
      userName: username,
      userPasswordHash: password
    };
    //let formDataSerialized = $.param(formData);

    $.ajax({
      url: 'http://localhost:8080/fshop/user/login', //
      type: 'POST',
      data: formData,
      contentType: 'application/x-www-form-urlencoded; charset=UTF-8', // 直接发送对象
      success: function(result) {
        console.log(result)
        if(result.code ==200){
          localStorage.setItem("token",result.data);  // 1.保存token
          window.location.href = "../../index.html";
        }else{
          // $(".login_tip").text(result.data);
        }
      },
      error: function() {
        // $('#response').text('Error occurred: ' + error);
        // 在此处处理 AJAX 请求错误。
      }
    });


  })
</script>
</body>

</html>

UserController


package com.fshop.controller;

import com.fshop.entity.User;
import com.fshop.service.IUserService;
import com.fshop.util.ServerResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

/**
 * <p>
 * 用户表 前端控制器
 * </p>
 *
 * @author dev
 * @since 2024-04-23
 */
@RestController
@RequestMapping("/user")
public class UserController {


    @Autowired
    private IUserService userService;

    @GetMapping("{userId}")
    @ResponseBody
    public User getById(@PathVariable("userId") Integer userId){
        User user = userService.getById(userId);
        return user;
    }



    @PostMapping("login")
    @ResponseBody
    public ServerResult login(User user){
        String userPasswordHash = user.getUserPasswordHash();
        String userName =  user.getUserName();
        System.out.println("contoller层"+userName+userPasswordHash);
        ServerResult result = userService.login(userName,userPasswordHash);
        System.out.println(result);
        return result;
    }
}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布