Question

我正在尝试将一些代码拼凑在一起。我试图将两种不同的功能组合成一种。

代码是：

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>

<body>
<center>

# first function
<form id="search_box"><input id="search_text" type="text"/></form>
<br/>

<div id="jQuery_send"></div>
<div id="python_response"></div>

<script>
  $('#search_box').submit(function() {
  $('#jQuery_send').text("jQuery sent: " + $('#search_text').val() );

  $.ajax(
    {
      type: "POST",
      url: "test2.py",
      data: "stuff_for_python=" + $('#search_text').val(),
      success: function(response)
        {
          $('#python_response').text("Python returned: " + response);
        }
    });
    return false;
  });
</script>

#second function

<p id="demo"></p>

<button onclick="urlLocation()">Click here to get URL of the page</p>

<script>
  function urlLocation()
    {
      var loc = location.href;
      document.getElementById("demo").innerHTML=loc;
    }
</script>

</center>
</body>
</html>

Python代码是：

#!/usr/bin/python

import cgi, cgitb 
cgitb.enable()  # for troubleshooting

form = cgi.FieldStorage()
jquery_input = form.getvalue("stuff_for_python", "nothing sent")

print "Content-type: text/html"
print
print jquery_input

对于函数1，在搜索框中键入的内容通过jQuery / AJAX发送到python脚本，并在框下方由jQuery和python回显。

Function2使用一个按钮，单击该按钮时，使用JavaScript打印其下方的当前URL。

我想弄清楚的是，有没有办法点击按钮，然后通过jQuery和python（函数1）以类似的方式回显当前的URL（函数2）？我是编程的新手，并试图弄清楚所有部分是如何组合在一起的。我意识到上面的代码本身并不多，但如果在未来的项目中进行自定义，它可能会很有用。

Python 2.7.6以及Apache2正在我的测试环境中使用。

Answer 1

让我看看我是否明白你在问什么。

首先，作为一般建议，建议您将HTML和JavaScript分开，而不是使用内联onclick属性。要触发按钮的onclick事件，您可以使用：

document.getElementById("foo").onclick = function_name;

或者，您可以使用jQuery：

$("#foo").click(function_name);

你甚至可以内联声明你的功能并执行：

$("#foo").click(function() {
    var loc = window.location.href;
    $("#demo").text(loc);

    $.ajax({
        type: "POST",
        url: "...",
        data: {
            stuff_for_python: loc
        },
        success: function(response) {
            // do something with response
        }
    });

});

Answer 2

我略微改变了答案以获得我追求的目标。最后，这是我使用的代码：

<script>
  $("button").click(function(){
  var loc = window.location.href;
  $.post("...", 
  {stuff_for_python: loc},

  function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});
</script>

为了简单起见，我选择提醒而不是在页面上显示网址。这是点击按钮（将创建当前URL的变量）的动作，然后将该变量发送到我最感兴趣的python。

通过Ajax发送到python的URL位置

2 个答案: