本文共 5488 字，大约阅读时间需要 18 分钟。

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请求步骤

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

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

2. 设置回调函数

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

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

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

4. 使用send()方法发送请求

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

5. 接收返回的数据

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请求登录
   用户名      密码         
   

// 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.pyfrom flask import Flask, render_template, request, jsonifyapp =  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

$.ajax常见参数

• url： 发送请求的 URL
• type：请求类型
• data：发送到服务器的数据
• dataType： 响应数据类型
• success： 请求成功时运行的函数
• error：如果请求失败要运行的函数
• async： 布尔值，表示请求是否异步处理。默认是 true

• 方式一: 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)

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

       
       
           
               
   
        
    项目        
                请选择                
    接口        
                请选择            
   

// 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 = '' + res[item].title + ''        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 = '' + res[item].name + ''          inter.append(option);        }      }else{
           alert('请求失败')      };    });  })});