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結束了，之後的用法有空我再發吧
大家加油