在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>
但是这次提示了这样一个错误:

在网上查了一下还是导入的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.'
})

浙公网安备 33010602011771号