ajax接收后台数据及dataType类型设置

Zss 发表于:

后端返回的是什么数据,那么在前段ajax中需要设置dataType的属性,不然则是收不到数据的

•”xml”: 返回 XML 文档,可用 jQuery 处理。
•”html”: 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
•”script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
•”json”: 返回 JSON 数据 。
•”jsonp”: JSONP 格式。使用 JSONP 形式调用函数时,如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
•”text”: 返回纯文本字符串

1.前段通过输入账号密码以json的格式发送到后端,后端接收到发送字符串到前端,再替换标签中的文本信息

返回的为文本信息时dataType应当设置为text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <script src="../static/jquery.min.js"></script>
   <script>
    $(function(){
        $("#btn").click(function(){
            var username=$('#username').val();
            var password=$('#password').val();
            var data= {
                data: JSON.stringify({
                    'username': username,
                    'password': password
                }),
            }
         $.ajax({
                url:'http://192.168.121.100:8080/',
                type:'POST',
                data:data,
                dataType: 'text',
            success: function (result) {
                    $('#test').text(result);
            }
   })
        })
    })
</script>
</head>
<body>
   <input type="text" id="username">
   <input type="password" id="password">
   <button id="btn">点击</button>
   <h2 id="test">登陆结果</h2>
</body>
</html>
from flask import Flask,render_template,request
app = Flask(__name__)
import json

@app.route('/',methods=['GET','POST'])
def index():
    if request.method == 'POST':
        info = json.loads(request.form.get('data'))
        print info
        if info['username'] == 'zss' and info['password'] == 'zss':
            return 'pass'
        else:return 'fail'
    else:return render_template('index.html')

if __name__ == '__main__':
    app.debug = True
    app.run(host='0.0.0.0',port=8080)

2.当后台返回json数据时,dataType是指的接收的数据类型

那么在后端python的字典格式就一定需要json.dumps将其转化成json格式再发送给前端,返回给前段是一个对象,使用data.result来取出json中的value

其中data指的是后端发过来的数据,而result是key,那么data.result所指的就是result的value

$.ajax({
             url:'http://192.168.121.100:8080/',
             type:'POST',
             data:data,
             dataType: 'json',
   success: function (data) {
                 $('#test').text(data.result)
   }
from flask import Flask,render_template,request
app = Flask(__name__)
import random,json

@app.route('/',methods=['GET','POST'])
def index():
    if request.method == 'POST':
        info = json.loads(request.form.get('data'))
        print info
        if info['username'] == 'zss' and info['password'] == 'zss':
            print(json.dumps({'result':'pass'}))
            return json.dumps({'result':'pass'})
        else:return json.dumps({'result':'fail'})
    else:return render_template('index.html')

if __name__ == '__main__':
    app.debug = True
    app.run(host='0.0.0.0',port=8080)