jquery ajax简单使用

额，周围不少同学最近开始学编程，知道api这个东西，也知道ajax这个东西,但是不会用，其实很简单这里写个简单的使用方法。
我们选用jquery的ajax函数，大佬们已经帮我们简化了ajax的函数，都封装好了直接用就好
后台我使用flask作为后台
文件目录

jquery.min.js
templates/
          index.html
run.py

1.下载jq

jquery.min.js

2.前端代码
然后在页面中调用(路径按照自己的实际情况填写)

<script src="/static/js/jquery-3.2.1.min.js"></script>

然后在body中创建一个输入框

        <input type="text" id="username">
        <button onclick="login()">登录</button>

然后写js

<script>
// 首先是post方法,我喜欢将数据变成json格式进行传输，所以我是用了JSON.stringify()将数据json化 
function login(){
       formdata = {
           'username': $('#username').val()  // $('#username')是按照id找到那个标签，$('#username').val()是获得那个输入框内的值
       }
       $.ajax({
           data:JSON.stringify(formdata),
           url:'/login',  //  url是你要访问的接口，就是发送的地址
           type:'POST', // 发送方式 post, get,delet,put......
           dataType:'json',  // 数据格式json
           contentType:'application/json',  // 头部：application/json
           success:function(result){
                // 访问接口成功后的回调函数，result是返回对象
                if(result.Result == 'OK'){
                    alert("OK")
                }else if(result.Result == 'ERR'){
                    alert("NO")
                }
            },
            error:function(){
            // 访问失败
               alert('无响应');
            }
       })
    }
//然后是get方法
function login2(){
        $.ajax({
                url:'/login?id=' + $('#username').val(),
                type:'GET',
                success:function(result){
                    if(result.Result == 'OK'){
                    alert("OK")
                }else if(result.Result == 'ERR'){
                    alert("NO")
                }
            },
                error:function(){
                    alert('连接失败')
                }
            })
    }
</script>

3.后端代码
run.py

#!/usr/bin/env python
# -*- coding:utf-8 -*-

from flask import Flask, jsonify, request, render_template
import json

app = Flask(__name__)
@app.route('/index)
def index():
    return render_template('index.html')

@app.route('/login', methods=["GET", "POST"])
def login():
    if request.method == 'POST':
        try:
            param = json.loads(request.data.decode("utf-8")) # 以json格式utf-8编码获取数据
        except ValueError: # 如果不是json格式则返回err
            return jsonify({
                'Result': 'ERR'
            })
        username = param.get("username", '') # 获的username
        if username:
            return jsonify({
                    'Result': 'OK'
                })
        else:
            return jsonify({
                'Result': 'ERR'
            })
    elif request.method == 'GET':
        param = request.args.get('username', '') # 获的username
        if username:
            return jsonify({
                    'Result': 'OK'
                })
        else:
            return jsonify({
                'Result': 'ERR'
            })

@app.route('/index')
def index():
    return render_template('index.html')

if __name__ == '__main__':

    app.run()
    

4.启动项目
启动项目

python run.py

浏览器访问

127.0.0.1:5000/index

深度截图_选择区域_20171118223733.png 深度截图_选择区域_20171118224204.png 深度截图_选择区域_20171118224216.png

5.结束
好了最简单的个demo结束了，之后的用法有空我再发吧
大家加油