Flask中使用AJax进行前后端数据的传递处理——【实现Python有道翻译】

本来是实现一个中翻英的单词demo,就是可以在前端输入框输入【想要查询的英文单词】。可以生成一个弹窗弹出对应的词语词性，意思等中文释义。
主要重点有三个：
1.实现单词翻译Python
2.以前没有用过ajax传输数据，第一次接触，主要想记录一下，ajax和flask结合前后端怎么传数据的用法。

1.实现有道翻译【翻译单词】

首先第一步,实现单词翻译。
这个功能点很简单，有道翻译加爬虫结合一下就可以，关键代码如下：

def queryWords(word):
    ''' 利用有道翻译查询单词 '''
    url = 'http://dict.youdao.com/w/{}/'.format(word)
    html = getURL(url)
    soup = BeautifulSoup(html.text, 'html.parser')
    trans_container = soup.find(class_='trans-container')

    if not trans_container:
        ''' not found the translation '''
        return [word]
    trans_li = trans_container.find_all('li')
    trans_data = [li.text.strip() for li in trans_li]
    print(trans_data)
    return trans_data

效果还可以：比如查一下happy。
可以’’.join(list)处理下成字符串形式

2.Flask里：Ajax从前端页面（输入框中）获取输入数据并传到后台处理（翻译）再返回前端显示在弹窗里

前端1
输入框 按钮部分

{#输入框#}
    <input  type="text" id="word" name="word" />
{#弹窗按钮#}
    <button class="btn" data-toggle="modal" data-target="#myModal">翻译</button>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">X</button>
                <div class="modal-title"></div>
            </div>
            {#弹窗的内容#}
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

前端2：JS部分
这部分对于这次来说我觉得最重要
首先，理解下面data是我们想传给后台的数据是什么
url：是我们把数据传给后台哪个url对应的函数去处理
！！ success:function (data) {}
这个是指后台处理完数据成功之后返回的数据，这里的data是后台返回的不是上面的那个data了。

data:…和success(data)不是一个哈！
前者：从前端获取并想传给后台的数据
后者：传后台成功后，后台返回给你的处理好的数据

这个是试了很多办法再弹窗里显示处理好的数据，最终可以成功的一个。👇
//在html页面的标签里显示自己后台返回的data内容
var html =""+data.trans+"";
var html2 =""+data.word+"";
$(".modal-body").html(html);
$(".modal-title").html(html2)

$(".btn").click(function(){
      $.ajax({
          url:"/trans",
          type:'POST',
           data: {'mydata':$('input[id="word"]').val()},
          dataType:"json",
        success:function (data) {
              //弹出弹框
             $('#myModal').modal();
             //在html页面的标签里显示自己后台返回的data内容
              var html ="<span>"+data.trans+"</span>";
              var html2 ="<span>"+data.word+"</span>";
             $(".modal-body").html(html);
             $(".modal-title").html(html2)
        }});
   });

后台部分：py文件里
这里需要用到1部分的翻译功能函数就不赘述
这里需要注意的就是我尝试直接把字典或者列表，jsonify return都失败了，会出错，传不回前端，最后把字典形式这样一下就可以了json.dumps(data)。上面success里用的data就是这里return的data啦，所以有data.word,data.trans两部分就可以理解了。

#获取前端传来的数据并进行翻译处理
@app.route('/trans', methods=['GET','POST'])
def trans():
    a = request.form.get('mydata')
    print(a)
    word = str(a)
    word_after_trans = queryWords(word)
    data={"word":word,"trans":'\n'.join(word_after_trans)}
    print(word_after_trans)
    # 这块需要注意，不可以直接用jsonify，会失败QAQ。
    # 用json.dumps(data)可把字典形式转为json可用，可以成功，
    return json.dumps(data)

# 一个平平无奇的主页面渲染。
@app.route('/')
def search():
    return render_template('index.html')

结果：
然后效果还不错：就是一个demo,没有花里胡哨的其他东西了（懒）
看图!!!

WHY：碎碎念==
其实我用 ajax主要为了解决一个问题：
本来仅仅一个翻译的小功能加demo很快就搞定了，但是由于很多弹窗或者模态窗都需要一个按钮作为触发事件，如果不用ajax传数据，我就会需要两个按钮，一个专门用于提交，一个用于显示模态框（我当然试过把触发弹窗的按钮的type改为“submit”，但是如果是Bootstrap的弹窗会在提交同时飞快显示下结果就消失了。。。如果是模态框就等点开的时候，就是none的解释翻译了，但是打印看了下传给后台的数据和处理都是传成功的。。。）
所以总而言之最后用ajax,相当于换思路把提交和显示模态框融合到一个按钮里了，就点击按钮，传数据到后端，如果成功直在success(后台返回处理后的数据)下设置弹出模态框的操作和把处理好的数据放到模态框相应的内容部分就ok了。。。。

其实要是更简单就不用写模态框，直接success下写alert（data）就可以，好像是js自带的那个弹出，就是不太好看。

-----------------------------2020-02-25 EchoZhang--------------------- 本来很快就搞定功能然后花了很久搞ajax传数据传来传去 气