15 JQuery - AJAX

0 使用core模块处理flask跨域问题

pip install flask_cors
from flask_cors import CORS

app = Flask(__name__)
# 全局设置
CORS(app, supports_credentials=True)

 

1 登录

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Signin Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("#login").click(function(){
    var username = $("#username").val();
    var password = $("#password").val();
    
    $.ajax({
        //请求地址
        url: "http://localhost:5000/user/login",
        //请求方式
        type: "post",
        // 请求头
        contentType: "application/json;charset=UTF-8",
        // 发送数据
        data: JSON.stringify(
            {"username":username,"password":password}
        ),
        // 请求数据类型
        dataType:"json",
        // 请求成功的处理逻辑
        success: function (result) {
            alert(JSON.stringify(result));
        },
        // 请求失败的处理逻辑
        error: function (e) {
            alert(e);
        }
    });
  });


  
});
</script>

  </head>

  <body>

    <div class="container">

      <form class="form-signin" id="loginForm">
        <h2 class="form-signin-heading">Please sign in</h2>
        <input type="text" id="username" class="form-control" placeholder="Username" required autofocus>
        <input type="password" id="password" class="form-control" placeholder="Password" required>
        <button class="btn btn-lg btn-primary btn-block" type="button" id="login"">Sign in</button>
      </form>

    </div> <!-- /container -->

  </body>
</html>

 

2 get 请求

  $.ajax({
        //请求地址
        url: "/demo/hello",
        //请求方式
        type: "get",
        // 发送数据
        data: "name=beihe",
        // 同步还是异步（true：异步，false：同步）
        async: false,
        // 请求成功
        success: function (result) {
            alert(JSON.stringify(result)); }, 
　　　　 // 请求失败
　　　　 error: function (e) { 
　　　　　　　　alert(e); 
　　　　} 
　　});

 

3 form请求

    $.ajax({
        //请求地址
        url: "/demo/login",
        //请求方式
        type: "post",
        // 发送数据
        data: "userName=admin&password=1234",
        // 同步还是异步（true：异步，false：同步）
        async: false,
        // 请求成功
        success: function (result) {
            alert(JSON.stringify(result));
        },
        // 请求失败
        error: function (e) {
            alert(e);
        }
    });

 

4 json请求

    $.ajax({
        //请求地址
        url: "/demo/login3",
        //请求方式
        type: "post",
        //请求的媒体类型
        contentType: "application/json;charset=UTF-8",
        // 发送数据
        data: '{"id":123, "userName":"admin", "password":"1234", "age": 18}',
        // 同步还是异步（true：异步，false：同步）
        async: false,
        // 请求成功的处理逻辑
        success: function (result) {
            alert(JSON.stringify(result));
        },
        // 请求失败的处理逻辑
        error: function (e) {
            alert(e);
        }
    });

 

posted @ 2021-04-04 15:37  栗子测试开发  阅读(48)  评论(0)    收藏  举报