WEB--Ajax基础

文章目录

Ajax简介

Ajax定义：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

Ajax作用：要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新

Ajax原理：浏览器先发生某个事件，比如说点击，此时js创建XMLHttpRequest对象并发送请求，服务器处理请求并返回数据，此时js处理返回并更新页面

参考文档：https://www.cnblogs.com/nuannuan7362/p/6441192.html?utm_source=itdadao&utm_medium=referral

Ajax请求步骤

初始化/创建一个XMLHttpRequest异步对象

var xmlhttp;
xmlhttp =new XMLHttpRequest();     //初始化，创建对象

设置回调函数

xmlhttp.onreadystatechange=callback; //响应回掉/监听

使用open()方法与服务器建立连接

// get
xmlhttp.open("GET",url,true);   

// post
xmlhttp.open("POST",url,true);   
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")   // 设置请求头

使用send()方法发送请求

xmlhttp.send('null');  // get请求发送
xmlhttp.send({
    
    'user': user, 'pwd': pwd});  //post请求发送

接收返回的数据

function callback() {
    
    
  // 判断异步对象的状态
  if(xmlhttp.readyState == 4) {
    
    
    // 判断交互是否成功
    if(xmlhttp.status == 200) {
    
    
      // 获取服务器响应的数据
      var res = xmlhttp.responseText
      // 解析数据
      res = JSON.parse(res)
    }
  }
}

XMLHttpRequest

xmlhttp.readyState有五种可能的值：

0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法。

1 (载入)：已经调用open() 方法，但尚未发送请求。

2 (载入完成)：请求已经发送完成。

3 (交互)：可以接收到部分响应数据。

4 (完成)：已经接收到了全部数据，并且连接已经关闭。

xmlhttp.status: 同http/https请求返回状态

200: 响应成功

登陆案例(xhr)

说明：一个带有用户名、密码和登陆按钮的页面，通过ajax实现点击登陆按钮后判断是否登陆成功，且页面不刷新

<!--ajax.html-->
   <h1>一、表单发送ajax请求登录</h1>
   <label for="username">用户名</label>
   <input type="text" name="username" id="username">
   <label for="password">密码</label>
   <input type="password" name="password" id="password">
   <input type="button" id="login" value="登录">
   <div></div>

// main.js

$(document).ready(function(){
    
    
    var xmlhttp;

    $('#login').click(function(){
    
    
        var user = document.getElementById("username").value;
        var pwd = document.getElementById("password").value;
        var url = "http://127.0.0.1:8000/login"

        xmlhttp =new XMLHttpRequest();     //初始化，创建对象
        xmlhttp.onreadystatechange=callback; //响应回掉/监听
        xmlhttp.open("POST",url,true);   //设置访问的页面
        
        // 组装post数据并发送请求
        var formData = new FormData();
        formData.append('user', user);
        formData.append('pwd', pwd);
        xmlhttp.send(formData);

    });

    // 监听函数
    function callback() {
    
    
        // 判断异步对象的状态
        if(xmlhttp.readyState == 4) {
    
    
          // 判断交互是否成功
          if(xmlhttp.status == 200) {
    
    
            // 获取服务器响应的数据
            var res = xmlhttp.responseText
            // 解析数据
            res = JSON.parse(res)
            if (res.code ===1) {
    
    
              alert('成功')
            }else{
    
    
              alert('失败')
          }
          }
        }
      }  
});

# server.py
from flask import Flask, render_template, request, jsonify


app =  Flask(__name__)


user_info = {
    
    'user': 'zhangsan', 'pwd': '123456'}


@app.route('/', methods=['get'])
def index():    
    return render_template('ajax.html')


@app.route('/login', methods=['post'])
def login():
    data = request.form
    if user_info.get('user') == data.get('user') and user_info.get('pwd') == data.get('pwd'):
        return jsonify({
    
    'code': 1, 'data':None, 'msg': '成功'})
    else:
        return jsonify({
    
    'code': 0, 'data':None, 'msg': '密码有误'})

if __name__ == "__main__":
    app.run(debug=True, host='0.0.0.0',port=8000)

jquery ajax

方式一: success

//  main.js
$(function(){
    
    
    $('#login').click(function(){
    
    
        // 获取账号密码
        var user = $('#username').val();
        var pwd = $('#password').val();
        // 方式一 
        $.ajax({
    
    
            url: '/login',    // url=  host + api
            type: 'post',
            data: {
    
    'user': user, 'pwd': pwd},
            dataType: 'json',
            success: function(data){
    
    
                if (data.code === 1){
    
    
                    alert(data.msg);
                }else{
    
    
                    alert(data.msg);
                }  
            },
        })

    });
});

方式二: done & fail

//  main.js

$(function(){
    
    
    $('#login').click(function(){
    
    
        // 获取账号密码
        var user = $('#username').val();
        var pwd = $('#password').val();

        // 方式二
        $.ajax({
    
    
            url: '/login',
            type: 'post',
            data: {
    
    'user': user, 'pwd': pwd},
            dataType: 'json'
        }).done(function(data){
    
    
            if (data.code === 1){
    
    
                alert(data.msg);
            }else{
    
    
                alert(data.msg);
            }
        }).fail(function(){
    
    
            alert('请求失败')
        })
    });
});

级联下拉框(jQuery+Ajax)

说明：实现二级下拉框随一级下拉框联动展示

<!-- demo .html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
    <link rel="shortcut icon" href="../static/img/svg/favicon.ico">
    <script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../static/js/main.js"></script>
</head>
<body>
    <form action="">
        <label for="pro">项目</label>
        <select name="pro" id="pro" style="width: 100px;">
            <option value="">请选择</option>
        </select>
        <label for="interface">接口</label>
        <select name="inter" id="interface" style="width: 100px;">
            <option value="">请选择</option>
        </select>
    </form>
</body>
</html>

// main.js

$(function(){
    
    
  var pro = $('#pro')
  $.ajax({
    
    
    url: '/pro_list',    
    type: 'get',
    data: '',
    dataType: 'json',
  }).done(function(data){
    
    
    if (data.code === 1){
    
    
      var res = data.data
      for (item in res){
    
    
        var option = '<option value=' + res[item].id + '>' + res[item].title + '</option>'
        pro.append(option);
      }
    }else{
    
    
      alert('请求失败')
    };
  });

  // 二级下拉框
  pro.change(function(){
    
    
    var pro_id = pro.val();
    $.ajax({
    
    
      url: '/interface',    
      type: 'post',
      data: {
    
    'pro_id': pro_id},
      dataType: 'json',
    }).done(function(data){
    
    
      var inter = $('#interface');
      if (data.code === 1){
    
    
        inter.empty();  // 清空二级下拉框上一次选择内容
        var res = data.data
        for (item in res){
    
    
          var option = '<option value=>' + res[item].name + '</option>'
          inter.append(option);
        }
      }else{
    
    
        alert('请求失败')
      };
    });
  })

});

文章目录

Ajax简介

Ajax请求步骤

XMLHttpRequest

登陆案例(xhr)

jquery ajax

级联下拉框(jQuery+Ajax)

猜你喜欢