1. 程式人生 > >用bootstrap做下拉選單,並使用jQuery實現從伺服器載入下拉選單的item。

用bootstrap做下拉選單,並使用jQuery實現從伺服器載入下拉選單的item。

用bootstrap做下拉選單,並使用jQuery實現從伺服器非同步載入下拉選單的item。

前臺程式碼:

<div class="form-group">
                <label class="col-md-2 control-label" for="phone_num">裝置分中心</label>
                <div class="col-md-8">
                    <input class="form-control" name="phone_num1" type="text" id="phone_num" placeholder="" value="" required />
                </div>
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="unitid" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        選擇<span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="unitid" id="unitItem">  
                    </ul>          
                </div>
            </div>
$("#unitid").bind("click", function () {            
                $.ajax({
                    url: "/control/showunit/",
                    dataType: "json",
                    success: function (data) {
                        $.each(data, function (index, units) {
                            $("#unitItem").append("<li><a href='#'>" + units.unit + "</a></li>");
                        });
                    },
                   
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("error");
                    }
                });
            });
後臺程式碼:
<pre name="code" class="python">def showunit (request):
    '''顯示所有公司的檢視'''
    start=request.POST.get('start','')
    logging.info(start)
    logging.info('hsa')
    s_list = []
    allunit= Unit.objects.all()
    for item in allunit:
        comptuple = {}
        comptuple['id'] = item.unitidx1
        comptuple['unit'] = item.name1
        s_list.append(comptuple)
    s_list=set_dict(s_list)
    total_count = len(s_list)
    root_name = 'units'
    #data = '{"total":%s,%s:%s}' %(total_count,root_name,simplejson.dumps(s_list))<span style="color:#33cc00;">#這種格式不是嚴格的json格式,返回時執行error函式;</span>
    data = '%s' %(simplejson.dumps(s_list))
    return HttpResponse(data,mimetype='text/javascript;')
#後臺必須返回嚴格的json格式資料,否則ajax不執行success回撥而是執行了error回撥
誒,起先在前臺修改了好幾次程式碼,每次後臺成功返回了資料,但不執行success函式,執行error函式,後來經過搜尋發現應該是後臺返回的json資料並不是嚴格的json格式,主要是參考了這篇文章ajax不執行success回撥而是執行了error回撥

相關推薦

bootstrap選單使用jQuery實現伺服器載入選單item

用bootstrap做下拉選單,並使用jQuery實現從伺服器非同步載入下拉選單的item。 前臺程式碼: <div class="form-group">

windows7將Cygwin加入右鍵選單當前目錄開啟

原文參考: http://blog.csdn.net/wjr2012/article/details/7964005 很詳細!!! 我在使用的時候遇到的問題是   修改windows登錄檔   1·開始->執行(或者win鍵+R),輸入REGED

excel巨集:列出一個目錄所有檔案也超連結

 從網上找了一些資訊,自己修改了一下 方式很直白,先把所有的目錄找了出來,然後一個個目錄來處理。 雖然與我習慣使用迭代的的方式有所差別,但也很好。 後面的函式是原始的,沒有改動,主函式自己重新寫過了。 檔案下載 '主函式 Sub ListFil

DOS批處理器移動指定數量文件到一個臨時文件夾上傳到linux服務器刪除臨時文件夾的文件

dosDOS批處理器移動指定數量文件到一個臨時文件夾,上傳到linux服務器,並刪除臨時文件夾下的文件,上傳需要依賴pscp.exe。腳本如下:@echo off&setlocal enabledelayedexpansion #將400個xml文件從M:\dockerEPG\目錄下移動到M:\scp

docker安裝centos在其上搭建lnmp環境

方便 libxml bic spro yum 啟動 openss ont dock 一、安裝CentOs容器 1.進入docker下載CentOs,這裏我使用的CentOs6.8   docker pull centos:6.8 2.創建容器   sudo docker r

如何在Windows安裝MYSQL截圖說明

family CP 選擇 查找 報錯 mage 端口號 ron 訪問 說明 : window 下安裝 mysql 雖然簡單,但是細節不註意就會安裝失敗,特別是配置服務器時,Current Root Password:為空;如果輸入密碼了在後面安裝會報錯。(不知道設置這個密碼

在學校機房聯想硬盤保護安裝Linux配置銳捷客戶端

本地源 常識 ont 裝系統 cas 靜態ip設置 mod 都是 不能 最近幾天一直在機房裏刷題,空調開著非常舒服。但是機房電腦裏全是windows系統,不太好用,挺膈應人的。 一直打算換個系統,剛才終於搞定網絡問題了,以後用電腦就可以爽到了。 聯想硬盤保護系統下u盤安裝

故事營銷或管理相關的8本書

ima 經濟 gtm 的人 sta .cn 技術分享 get image 今年新出的經管類暢銷書中,有不少涉及到用故事做營銷或管理的話題。以下是我讀過的其中8本。沒發現特別好的。點擊名稱或圖片可以看到詳細的點評與摘抄。 3星|《你的顧客需要

說說這半年的一個專案分享給各位

    已經快一年沒有寫部落格了,實在是太忙了,忙到已經沒有時間寫文章。近半年的時間一直在忙著一個新專案,最近終於有了階段性成果,覺得很有必要寫寫文章來記錄一下這個新的專案。趁著這兩天趕路的空閒時間記錄分享一下專案的經驗和過程。     (一)  這是一個什

Windows配置Redis修改密碼

我參考了很多網路上的修改方法,我覺得有些許問題。下面我簡單的說下我的解決辦法。 1.首先找到Redis的服務啟動情況: 2.再檢視Redis服務的屬性   3.需要修改的是 redis.windows-service.conf 配置檔案,非redis.windo

Mac 生成keystore對apk進行簽名

  1.檢視本機java環境 /usr/libexec/java_home -V 最後一行是Mac預設使用的jdk版本。 2.進入java的環境 /Library/Java/JavaVirtualMachines/jdk1.8.0_161.jdk/Contents/Ho

自適應:JS的自適應是最差的自適應記頁面重新整理前後尺寸變化

今天遇到一個硬茬,我在使用weui重構一個頁面時,出現一個問題:路由進入頁面時,頁面內容尺寸硬是會變大,重新整理後又恢復正常: 專案背景:一個使用react-starter-kit構建的B端SPA專案 上圖: 出現問題時的情況:   重新整理後(它本應該的樣子):   &

windows安裝nginx新增至系統服務

安裝:解壓修改配置檔案執行即可   新增服務 需要藉助"Windows Service Wrapper"小工具下載地址:winsw GitHub 下載後放在nginx目錄下,並修改名字為nginx-service.exe 建立配置檔案nginx-service.exe.config&n

HTML5一個個人網站此文僅展示個人主頁介面內附原始碼下載地址

html5 ,用css去修飾自己的個人主頁 程式碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

zabbix自定義指令碼監測windows伺服器指定目錄檔案數量設定告警及圖形

一、新增自定義監控引數 1、在agent端修改配置檔案允許自定義監控引數 UnsafeUserParameters=1 2、新增自定義監控引數 UserParameter=count.files,dir "f:/test/"|find /C ".Z" 相關DOS命令介紹

win10配置Mysql設定遠端連線許可權

安裝版的mysql解除安裝起來太麻煩了,所以選擇使用免安裝版的不失為一個好的選擇,畢竟免安裝版的東西都在一個資料夾下,不要了直接刪了資料夾就好~~ 1.首先是下載了,點入官網連結,一直到最下面,選擇第一個下載,解壓到你想讓它待的地方——就相當於安裝目錄。 2.在解壓得到的資料夾(我

IDEA編輯Spring-Boot Web設定日誌級別列印到相應的目錄

我使用的日誌框架是logback。我們的目的是把INFO日誌和ERROR分開到不同的檔案中,並且能夠每日形成一個日誌檔案。 第一步,使用idea建立一個Spring-Boot的專案 一直預設,有關SpringBoot基礎建立都不清楚的話,可以先去看看入門教程,到這步的

【django】windows安裝django建立new project

一、 進入:python 退出:exit()    二、 安裝django: 1.解壓官方下載的django-1.10.1 2.在該目錄下,python setup.py install  大概需要1分鐘的時間安裝完成,Django將被安

springboot2.x 和redis快取的整合有專案地址的呦

1. springboot和用redis做快取的整合 這裡要整合的是springboot2.x和redis,所以你要把你的springboot 版本在開始之前換成springboot2.0之後的 具體怎麼換其實就是換一下版本號,不換的話後面會有很多問題,樓主踩了無數坑 專案地

利用boost遍歷路徑所有檔案判斷檔案是否是資料夾

#include<boost/filesystem.hpp> void GetFileNameFromDir(const char* rootPath) {     boost::filesystem::path dir(rootPath);     if (b