博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
WEB--Ajax基础
阅读量:580 次
发布时间:2019-03-11

本文共 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();     //初始化,创建对象
  1. 设置回调函数
xmlhttp.onreadystatechange=callback; //响应回掉/监听
  1. 使用open()方法与服务器建立连接
// getxmlhttp.open("GET",url,true);   // postxmlhttp.open("POST",url,true);   xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")   // 设置请求头
  1. 使用send()方法发送请求
xmlhttp.send('null');  // get请求发送xmlhttp.send({
'user': user, 'pwd': pwd}); //post请求发送
  1. 接收返回的数据
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)

  • 说明: 实现二级下拉框随一级下拉框联动展示
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('请求失败') }; }); })});
你可能感兴趣的文章