使用jQuery返回同一頁面的Python響應ajax

我想使用jQuery ajax和帶有兩個字段的簡單Web窗體向python腳本發送值。我希望結果顯示在同一個調用頁面（index.html.en）的div標籤內。使用jQuery返回同一頁面的Python響應ajax

我有一個名爲index.html.en的頁面，我點擊提交按鈕，表單中的值被傳遞給python腳本（printname.py），結果被返回並顯示在一個div標籤中放在index.html.en頁面的表單下。我花了最近兩天尋找答案或例子，但我還沒有找到答案或例子。我不確定自己正在嘗試做什麼，以及我想做什麼的方式是可能的。我正在使用Mac OS Lion，並且我的網絡服務器已啓動並正在運行。目前我的代碼驗證字段不是空的，但它不返回任何內容。任何幫助，將不勝感激。我的代碼和文件結構如下。

文件結構：

Library 
    WebServer 
    CGI-Exectutables/printname.py 
    Documents/projects/rambo/index.html.en

HTML文件：Index.html.en

<html> 
<head> 

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script> 

<script> 

function ValidateFields(){ 
    $("#fname_error").hide(); 
    $("#lname_error").hide(); 
    var theForm = document.forms[0]; 
    var isError = "false"; 

    for (i=0;i<theForm.length;i++){ 
    if(theForm.elements[i].getAttribute("type") == "text"){ 
     var theFormField = theForm.elements[i]; 
     var theFormFieldValue = theForm.elements[i].value; 

     if(theFormFieldValue == ""){ 
     isError = "true"; 
     var theFormFieldName = theForm.elements[i].getAttribute("name"); 
     console.log(theFormFieldName); 
     switch (theFormFieldName) 
     { 
     case "first_name": 
      $("#fname_error").show(); 
      break; 
     case "last_name": 
      $("#lname_error").show(); 
      break; 
     } 
     } 
    } 
    } 
    if(isError == "true"){ 
    return false; 
    } 
    //The reset method clears all fields on the form 
    theform.reset(); 
} 
</script> 

<script> 
function Initialize_Form(){ 
    $("#fname_error").hide(); 
    $("#lname_error").hide(); 
} 
</script> 

<script> 
$(document).ready(function() { 

    Initialize_Form(); 

    $("#one").submit(function(){ 
    ValidateFields(); 
    event.preventDefault(); 
    }); 

    $.ajax(
    { 
    type: "POST", 
    url: "/cgi-bin/printname.py", 
    data: "Catsup", 
    success: function(response) 
    { 
    $("#response_1").text("We returned python returned" + response); 
    } 
    }); 
    return false; 

}); 

</script> 

<title>Mike's Test Ajax Python File</title> 

</head> 
<body> 
    <h1>Test Page</h1> 
    <form id="one" name="one"> 
    <table> 
    <tr> 
     <td>first:</td> 
     <td><input type="text" name="first_name"></td> 
     <td><div id="fname_error"><p>first name is required</p></div></td> 
    </tr> 
    <tr> 
     <td>last:</td> 
     <td><input type="text" name="last_name"></td> 
     <td><div id="lname_error"><p>Last name is required</p></div></td> 
    </tr> 
    </table> 
    <input type="submit" value="submit"> 
    </form> 
    <div id = "response_1"></div> 
    <div id = "response_2"></div> 
</body> 
</html>

的Python文件：printname.py

#!/usr/bin/python 

import cgi, cgitb 

form = cgi.FieldStorage() 
fname = form.getvalue('first_name') 
lname = form.getvalue('last_name') 

print "Content-Type: text/html" 
print 

print (fname + ' ' + lname)

再說一遍，我是相當新的python和ajax，所以我不知道我是否試圖做到這一點。

來源

2013-12-13 M_66

您的Javascript正在發送Ajax，但您的Python腳本期待CGI。看看這個鏈接，並確保你的服務器被配置爲允許執行Python腳本：http://stackoverflow.com/questions/2201561/how-do-you-execute-a-server-side-python-script-using -jquery – paulsm4

是的，我的服務器被配置爲允許執行Python腳本。提供的鏈接對我的問題沒有幫助。 –

您需要開始使用瀏覽器的開發工具，以便調試您的JavaScript代碼（逐行掃描，設置斷點等）。

在這種情況下，您的$.ajax(..)調用不屬於您的$('#one').submit(...)處理程序，這意味着您在提交表單時不會調用它。您可以在cgi腳本中驗證這是print("hello world")的問題（它應該在文檔準備就緒時立即顯示）。

data:參數$.ajax(..)的調用應該與$('form#one').serialize()類似，這樣實際參數（帶值）就會發送到python。（我從這裏回憶起，在jQuery文檔中查看它）。

有很多框架可以處理所有處理請求/響應的細節，您也可以查看這些細節。 CGI是非常90年代;-)

來源

2013-12-13 22:02:02 thebjorn

使用jQuery返回同一頁面的Python響應ajax

回答

相關問題