本文共 5446 字，大约阅读时间需要 18 分钟。
- 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
var xmlhttp;xmlhttp =new XMLHttpRequest(); //初始化，创建对象
xmlhttp.onreadystatechange=callback; //响应回掉/监听
// getxmlhttp.open("GET",url,true); // postxmlhttp.open("POST",url,true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") // 设置请求头 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) } }}
- 0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法。
- 1 (载入)：已经调用open() 方法，但尚未发送请求。
- 2 (载入完成)： 请求已经发送完成。
- 3 (交互)：可以接收到部分响应数据。
- 4 (完成)：已经接收到了全部数据，并且连接已经关闭。
- 200: 响应成功
- 说明：一个带有用户名、密码和登陆按钮的页面，通过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) $.ajax常见参数
- url： 发送请求的 URL
- type：请求类型
- data：发送到服务器的数据
- dataType： 响应数据类型
- success： 请求成功时运行的函数
- error：如果请求失败要运行的函数
- async： 布尔值，表示请求是否异步处理。默认是 true
// 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); } }, }) });}); // 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('请求失败') }) });});
- 说明： 实现二级下拉框随一级下拉框联动展示
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 = '' 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 = '' inter.append(option); } }else{ alert('请求失败') }; }); })});