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()方法与服务器建立连接
xmlhttp. open ( "GET" , url, true ) ;
xmlhttp. open ( "POST" , url, true ) ;
xmlhttp. setRequestHeader ( "Content-Type" , "application/x-www-form-urlencoded" )
使用send()方法发送请求
xmlhttp. send ( 'null' ) ;
xmlhttp. send ( {
'user' : user, 'pwd' : pwd} ) ;
接收返回的数据
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请求返回状态
登陆案例(xhr)
说明:一个带有用户名、密码和登陆按钮的页面,通过ajax实现点击登陆按钮后判断是否登陆成功,且页面不刷新
< 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>
$ ( 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 ) ;
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 ( '失败' )
}
}
}
}
} ) ;
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
$ ( function ( ) {
$ ( '#login' ) . click ( function ( ) {
var user = $ ( '#username' ) . val ( ) ;
var pwd = $ ( '#password' ) . val ( ) ;
$. ajax ( {
url: '/login' ,
type: 'post' ,
data: {
'user' : user, 'pwd' : pwd} ,
dataType: 'json' ,
success: function ( data) {
if ( data. code === 1 ) {
alert ( data. msg) ;
} else {
alert ( data. msg) ;
}
} ,
} )
} ) ;
} ) ;
$ ( 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)
<!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>
$ ( 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 ( '请求失败' )
} ;
} ) ;
} )
} ) ;