如何將Python創建的JSON數據發送到JavaScript？

Question

我使用Python cherrypy和Jinja來爲我的網頁提供服務。我有兩個Python文件：Main.py（處理網頁）和search.py​​（服務器端函數）。
我創建一個基於本地JSON文件名爲component.json（按功能componentSelectBar內search.py​​創建）（使用JavaScript）動態下拉列表。

我想問一下怎麼能我的JavaScript檢索JSON數據沒有JSON數據物理存儲到我的本地網站根目錄的文件夾，仍然實現動態下拉列表的功能。

的componentSelectBar函數內部search.py​​：

def componentSelectBar(self, brand, category): 
    args = [brand, category] 
    self.myCursor.callproc('findComponent', args) 
    for result in self.myCursor.stored_results(): 
     component = result.fetchall() 
    if (len(component) == 0): 
     print "component not found" 
     return "no" 

    components = [] 
    for com in component: 
     t = unicodedata.normalize('NFKD', com[0]).encode('ascii', 'ignore') 
     components.append(t) 

    j = json.dumps(components) 
    rowarraysFile = 'public/json/component.json' 
    f = open(rowarraysFile, 'w') 
    print >> f, j 

    print "finish component bar" 
    return "ok" 

的selectBar.js：

$.getJSON("static/json/component.json", function (result) { 
     console.log("retrieve component list"); 
     console.log("where am i"); 
     $.each(result, function (i, word) { 
      $("#component").append("<option>"+word+"</option>"); 
     }); 
    }); 

Answer 1

要使用JSON數據直接轉換爲JavaScript，你可以使用

var response = JSON.parse(component); 
console.log(component); //prints 

OR

您已經創建JSON文件。如果該文件是在正確的格式，那麼你可以使用jQuery jQuery.getJSON()更多的是文件中讀取JSON數據：http://api.jquery.com/jQuery.getJSON/

Answer 2

1. 存儲結果，從componentSelectBar到數據庫
2. 暴露新的API從數據庫中結果並返回JSON到瀏覽器

演示在這裏：

在CherryPy的

@cherrypy.expose 
def codeSearch(self, modelNumber, category, brand): 
    ... 
    result = self.search.componentSelectBar(cherrypy.session['brand'], cherrypy.session['category']) 
    # here store result into a database, for example, brand_category_search_result 
    ... 

@cherrypy.expose 
@cherrypy.tools.json_out() 
def getSearchResult(self, category, brand): 
    # load json from that database, here is brand_category_search_result 
    a_json = loadSearchResult(category, brand) 

    return a_json 

文件，希望幫助： Encoding response

在你broswer，你需要得到/ getSearchResult爲JSON：

$.getJSON("/getSearchResult/<arguments here>", function (result) { 
    console.log("retrieve component list"); 
    console.log("where am i"); 
    $.each(result, function (i, word) { 
     $("#component").append("<option>"+word+"</option>"); 
    }); 
}); 

Answer 3

您正在渲染HTML和發送它的響應。如果你想使用JSON，這個必須改變。您應該在main.py中返回JSON，而您將從Javascript發送HTML（GET或POST）並將其呈現回去。

def componentSelectBar(self, brand, category): 
    /* Your code goes here */ 
    j = json.dumps(components) 
    // Code to add a persistent store here 
    rowarraysFile = 'public/json/component.json' 
    f = open(rowarraysFile, 'w') 
    print >> f, j 
    // Better to use append mode and append the contents to the file in python 
    return j //Instead of string ok 


@cherrypy.expose 
def codeSearch(self): 
    json_request = cherrypy.request.body.read() 
    import json # This should go to the top of the file 
    input_dict = json.loads(json_request) 
    modelNumber = input_dict.get("modelNumber", "") 
    category = input_dict.get("category", "") 
    brand = input_dict.get("brand", "") 
    /* Your code goes here */ 
    json_response = self.search.componentSelectBar(cherrypy.session['brand'], cherrypy.session['category']) 
    return json_response 

在這裏，我只爲成功的場景添加。但是，您應該管理componentSelectBar函數中的故障場景（一個JSON錯誤響應，該響應可以提供儘可能詳細的信息）。這將幫助您保持codeSearch函數儘可能簡單並且長期有幫助（請閱讀維護代碼）。

我建議你閱讀PEP 8並將它應用到代碼中，因爲它對於所有的python程序員來說都是一種規範，並且幫助任何其他接觸你的代碼的人。

編輯：這是一個示例JavaScript函數，這將使POST請求，並得到JSON響應：

searchResponse: function(){ 
    $.ajax({ 
    url: 'http://localhost:8080/codeSearch', // Add your URL here 
    data: {"brand" : "Levis", "category" : "pants"} 
    async: False, 
    success: function(search_response) { 
     response_json = JSON.parse(search_response) 
     alert(response_json) 
     // Do what you have to do here; 
     // In this specific case, you have to generate table or any structure based on the response received 
    } 
    }) 
}