Question

我想使用jQuery ajax和一个带有两个字段的简单Web表单来将值发送到python脚本。我希望结果显示在同一个调用页面上的div标签中（index.html.en）。

我有一个名为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还不熟悉，所以我不确定我是否可以这样做。

Answer 1

您需要开始使用浏览器的开发工具，以便调试javascript代码（逐行逐步，设置断点等）。

在这种情况下，您的$.ajax(..)调用似乎不属于您的$('#one').submit(...)处理程序，这意味着在您提交表单时不会调用它。您可以在cgi脚本中print("hello world")验证这是否是问题（它应该在文档就绪时立即显示）。

data:调用中的$.ajax(..)参数应该类似于$('form#one').serialize()，以便将实际参数（带有值）发送到python。（我将从内存开始，在jQuery文档中查找）。

有许多框架可以处理您可能想要查看的处理请求/响应的所有细节。 cgi是90年代; - ）

使用jQuery ajax将Python响应返回到同一页面

1 个答案: