2021-04-22 jQuery（ajax）05

最新推荐文章于 2022-10-31 13:46:26 发布

子非鱼emma

最新推荐文章于 2022-10-31 13:46:26 发布

阅读量166

点赞数 1

分类专栏： jq&ajax

本文链接：https://blog.csdn.net/qq_38998319/article/details/116031757

版权

jq&ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

窝窝注册代码


   //继续注册
/*    1.获取元素 注册点击事件.阻止表单跳转的默认行为
      2.表单验证 获取昵称 密码 确认密码 验证码 都不能为空
       密码和确认密码要一致 
      3.发送请求 注册用户 返回的数据是成功  代表注册成功 跳转到登录
        失败提示错误
*/
$('#editForm button').on('click',function(e){
    // 因为按钮是submit默认提交的行为 阻止一下默认行为
    e.preventDefault();

    //  获取昵称 密码  确认密码 验证码
    // 昵称
    var nickname = $('#editForm [name=nickname]').val().trim();
    //密码
    var password = $('#editForm [name=password]').val().trim();
    //确认密码
    var rpassword = $('#editForm [name=rpassword]').val().trim();
    //验证码
    var verifyCode = $('#editForm [name=verifyCode]').val().trim();
    //手机号
    var phoneNum = $('#inputPassword').val().trim();
    // console.log(phoneNum);
    //验证密码
    if(password !==rpassword){
        alert('两次密码输入不一致,请重新输入!!!!');
        return;
    }

    //发送请求
    $.ajax({
        url:'http://kumanxuan1.f3322.net:8809/users/regist',
        type:'post',
        data:{
            phone:phoneNum,
            nickname:nickname,
            password:password,
            rpassword:rpassword,
            verifyCode:verifyCode
        },
        success:function(res){
          if(res.msg ==='操作成功'){
              alert('注册成功');
              location.href="./login.html"; 
          }else{
              alert(res.msg);
          }
        }
    })


})
})

窝窝登入代码：

$(() => {
    /* 
    目标: 实现登录
    步骤:
    1.获取元素 注册事件 如果有默认行为也要阻止
    2.验证表单 内容不能为空
    3.发送请求 判断用户名和密码是否正确(使用接口)
    4.如果成功 进入到首页
    */

    $('#_js_loginBtn').on('click',function(){
       //表单验证
       //用户名
       var username = $('#_j_login_form [name=username]').val().trim();
       //密码
       var password = $('#_j_login_form [name=password]').val().trim();
            if(username.length ===0 ||password.length ===0){
                alert('请填写完整的用户名和密码');
                return;
            }


        //发送请求
        $.ajax({
            url:'http://kumanxuan1.f3322.net:8809/users/login',
            type:'post',
            data:{
                username: username,
                password:password
            },
            success:function(res){
              if(res.data){
                  alert('登录成功');
                  setTimeout(function(){
                       location.href="./index.html";
                  },1000);
                 
                  
              }else{
                 alert(res.msg)
              }
            }
        })
     
    })
 })

1.原生ajax

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
   /* 
   4步：
   1.创建 异步请求的对象
   2.设置请求方式 请求地址
   3.状态变化的事件
   4.发送请求
 */

  //  1.创建ajax对象
   var xhr=new XMLHttpRequest();
   console.log(xhr.readyState);
  //  2.设置方式和地址
   xhr.open('get','http://kumanxuan1.f3322.net:8809/travels/query');
  //  console.log(xhr.readyState);
  //  3.监听状态变化的事件
   xhr.onreadystatechange=function(){
     console.log(xhr.readyState);
     if(xhr.readyState===4&& xhr.status===200){
      //  判断返回数据的格式 content-type：application/json
      // 所有的相应头

      var str=xhr.getAllResponseHeaders();
      console.log(str);
     
    
      // var type=getAllResponseHeaders('content-type');//application/json
      // console.log(type);
      // console.log(str);
      // console.log(xhr.responseText);
      // 如果服务器返回的数据类型是application/json 格式 可以JAON.parse()进行转换

      var data=JSON.parse(xhr.responseText)
      // console.log(data);
     }
   }

  //  4.发送请求
   xhr.send();
  //  console.log(xhr.readyState);
  </script>
</html>

2.get请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./lib/jquery.js"></script>
  </body>
  <script>
   
  //  通过get方式

  //  1.创建对象

   var xhr=new XMLHttpRequest();
  //  2.建立请求
   xhr.open(
     'get',
     'http://kumanxuan1.f3322.net:8809/travels/query?orderType=2&currentPage=2'
   );
  //  3.监听
   xhr.onreadystatechange=function(){
     if(xhr.readyState===4 && xhr.status===200){
       console.log(JSON.parse(xhr.responseText));

     }
   };
  //  4.发送
   xhr.send();

  //  把数据转成url编码的格式
  var gkd={
    nmae:'jack',
    age:12
  };
  // 转成?orderType=2&currentPage=2
  // 与url中的 name=jack&age=12  保持一致
  console.log($.param(gkd));

  </script>
</html>

3.post请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
      <!-- <form action="" enctype="application/x-www-form-urlencoded"></form> -->
  </body>
  <script>
    var xhr = new XMLHttpRequest();
    xhr.open("post", "http://kumanxuan1.f3322.net:8809/users/login");
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    };

  //  如果是post请求的话，在出去之前一定要告诉服务器要如何解析数据
   xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
  //  post请求 要在send()传值 也是key=value&key=value。。。
   xhr.send('username=19000000000&password=123456')
    
  </script>
</html>

4.ajax封装

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body></body>
<script>
  /* 
  封装过程：
  1. 过程
  2. 分析说明是变得， 什么是不变的
  变得： 请求方式 请求地址 带回服务器的数据请求成功的逻辑 形参
  3. 把不变的作为固定的函数体
  4. 按照函数的语法写代码
  5. 结合实际情况 考虑返回值问题
 */
  // ============================封装一个将对象转为url地址的函数
  function toUrl(obj) {
    console.log(obj);
    var arr = [];
    for (var key in obj) {
      arr.push(key + '=' + obj([kdy]));
    }
    console.log(arr);
    var res = arr.join('&');
    return res;

  }







// ===================================ajax函数封装
  function ajax(method, url, data, fun) {


     //  1.******************创建ajax对象
    var xhr = new XMLHttpRequest();


     //  2.******************设置方式和地址
    data = toUrl(data);
    console.log(data);
    // 如果是get请求，需要把数据放在url后面，并且是k=xxx&k=xxx
    if (method === 'get') {
      url += '?' + data;
    }
    xhr.open(method, url);


//  3.************************监听状态变化的事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var type = xhr.getResponseHeader('content-type');
        if (type === 'application/json') {
          // 如果返回的数据是application/json格式 就用JSON.parse转换
          fun(JSON.parse(xhr.responseText));
          // 
        } else {
          // 如果不是就不转换
          fun(xhr.responseText);
        }
      }
    };

      //  4.**********************发送请求

    //   如果是post方式 首先 设置请求头 在send传值
    if (method === 'post') {
      xhr.setRequestHeader(
        "content-type",
        "application/x-www-form-urlencoded"

      );

    } else {
      xhr.send();
    }
  }



// =============================================函数调用

  ajax(
    'post',
    {
      username: 19000000000,
        password: 123456,
    },
    function(res){
console.log(res);
    }
  );
</script>

</html>

子非鱼emma

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2021-04-22 jQuery（ajax）05

窝窝注册代码 //继续注册/* 1.获取元素注册点击事件.阻止表单跳转的默认行为 2.表单验证获取昵称密码确认密码验证码都不能为空密码和确认密码要一致 3.发送请求注册用户返回的数据是成功代表注册成功跳转到登录失败提示错误*/$('#editForm button').on('click',function(e){ // 因为按钮是submit默认提交的行为阻止一下默认行为 e.pre
复制链接

扫一扫

专栏目录