在django框架下使用$.ajax的曲折过程

    $(function(){
        $('#submit').click(function () {
          $.ajax({
              type:"get",
              url:"/submit/",
              data: $('form'),
              success: function (data) {
                console.log(data)}
        })
    })});

写了这么一段东西想要给如下一个表单绑定一个点击事件

            <form>
                <select class="selectpicker">
                    <option  name="dataset" value="eqtl_heading">headingdata</option>
                    <option  name="dataset" value="">Something else here</option>
                </select>
                <input type="text" name="genesearch" id="genesearch" placeholder="genename">
                <input type="button" value="submit" id="submit">
            </form>

但是点击button完全没有反应,也没有看到任何报错提示。(我这就很不解,为什么一点报错都没有。)
后来发现是自己一开始导入的是jquery-3.3.1.slim.min.js这个文件,因为是slim.min所以删减了一些东西,其中就包括ajax,重新导入完整的jquery.js之后可以绑定上点击事件了。(为什么这种东西浏览器不给我报错呢 - - 都是我自己瞎试试出来的,就很烦啊。)

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

但是这次提示了这样一个错误:
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20191122084830245.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0ODcxMg==,size_16,color_FFFFFF,t_70)
在网上查了一下还是导入的jquery库不完整的问题,于是我又重新导入了这个

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

这下可以向后台发送数据了。

selectpicker获取选中option的属性或者值:https://blog.csdn.net/m0_37355951/article/details/75339043?utm_source=blogxgwz4
html基础:jquery的ajax获取form表单数据:https://www.cnblogs.com/bendouyao/p/9250904.html

根据以上两个连接中的方法,使用ajax获取了表单和selectpicker中我所需要的值,然后很野蛮的把字符串拼成我需要的格式,传回views中,可以读取想要的数据。数据发回前端后的处理目前还没完成,估计是得用一个数据表格,然后还得做一些返回格式上的调整。

有关$.ajax中数据格式的问题参考了:https://www.cnblogs.com/yangguoe/p/8986108.html

最后放一下修改好的代码:

1.通过$.ajax读取数据的部分

    $(function(){
        $('#submit').click(function () {
            var data=$('#searchForm').serialize()
            var dataSet=$('#dataSet').find("option:selected").attr('value')
            var fieldName = $('#fieldName').find("option:selected").attr('value')
            data = data + '&dataSet=' + dataSet + '&fieldName=' + fieldName 
            //……你敢信这字符串我居然给拼出正确格式了= = 但是这个手法真的好蠢啊我服了我自己Orz……
            $.ajax({
              type:"get",
              url:"/submit/",
              data: data,
              success: function (data) {
                console.log(data)}
        })
    })});

2.search.html中的部分

            <form id="searchForm">
                <select class="selectpicker" id="dataSet">
                    <option  value="eqtl_heading">headingdata</option>
                    <option  value="">Something else here</option>
                </select>
                
                <select class="selectpicker" id="fieldName">
                    <option  value="TIGR_TU">GeneName</option>
                    <option  value="Bin">BinNumber</option>
                    <option  value="cistrans">cis/trans</option>
                    <option  value="">Something else here</option>
                </select>
                
                <input type="text" name="keyWord" id="keyWord" placeholder="genename">
                <input type="button" value="submit" id="submit">
            </form>

2.views.py中取出ajax的数据并进行sql查询

def submit(request):
    request.encoding='utf-8'
    keyWord = request.GET['keyWord']
    dataSet = request.GET['dataSet']
    fieldName = request.GET['fieldName']

    if keyWord:
        sql = 'SELECT * from ' + dataSet + ' WHERE '+ fieldName + ' = "' + keyWord+'"'
    else:
        sql = 'SELECT * from ' + dataSet
    data = pd.read_sql_query(sql, engine).to_dict('records')
    if data:
        return render(request, 'search.html', {
            'Find': "Search success",
            'data': data, })
    else:
        return render(request,'search.html',{
            'Message': 'No result found.'
        })
posted @ 2021-10-12 17:16  Craven胆小鬼  阅读(74)  评论(0)    收藏  举报