Chrome打包应用,如何提交表单

时间:2014-05-19 23:47:46

标签: javascript ajax html5 google-chrome google-chrome-app

我是Chrome打包应用程序的新手,有两个问题(实际上解决了一个问题)。

我正在尝试使用Ajax和POST将一些数据发送到远程服务器。据我所知,我不能使用内联javascript(标签),而且,我不能在HTML按钮元素上使用事件。所以,我不知道在点击按钮的时候把我的javascript放在哪里以及执行什么。我的表单很简单:

<!DOCTYPE html>
<html>
  <head>
    <script> 
      function send(){
        //do some ajax
      }
    </script>
  </head>
  <body>
    <img id="headerImage" name="headerImage" src="logo_main.gif"/>
    <div>
      <form>
        <table>
          <tr>
            <td>Send:</td>
            <td><input type="text" size="32" id="send" name="send"/>
          </tr>
          <tr>
            <td colspan="2"><button id="send">Send</button>
          </tr>
        </table>
      </form>
    </div>
  </body>
</html>

所以我的两个问题是:我在哪里放置我的JavaScript?以及如何从我的HTML按钮元素执行javascript函数?

非常感谢!

Pd积。我已经搜索了关于此的完整文档,但找不到它。如果有人发布完整文档的链接,我将非常感谢。

1 个答案:

答案 0 :(得分:2)

您的问题的标题与您的问题并不完全对应(编辑它,也许?)。以引用的方式回答您的问题:

  

所以我的两个问题是:我在哪里放置我的JavaScript?我该怎么做   从我的HTML按钮元素执行javascript函数?

这两个问题都在documentation on Content Security Policy中得到了回答,并举了一个例子。您的JavaScript代码应该放在一个包含<script>标记的单独文件中,您需要在该代码中绑定事件侦听器。

为了使这个问题成为正确答案,以下是如何在您的情况下执行此操作,使用jQuery (对于非jQuery解决方案,请参阅提到的文档)。要使用,请在应用程序的文件中将jQuery添加为“jquery.js”。

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery.js"></script>  
    <script src="form.js"></script>      
  </head>
  <body>
    <!-- ... -->
    <button id="send">Send</button>
    <!-- ... -->
  </body>
</html>

form.js:

function send(){
  //do some ajax
}

// Use document ready to wait for DOM to be created
$(document).ready(function(){
  $('#send').click(send); // Binds a listener for onclick event
});