动态包括 javascript 和 jquery

Question

我在这里使用 IE 时遇到问题。我需要在不同服务器和域中的不同网页上插入表单。我正在通过这样的 javascript 包括：

<script type="text/javascript" src="http://www.sisgol.com.br/teste/write_js.php?content=form_content"></script>
<div id="form_hypescience">
</div>

include 将以下内容加载到 div 中：

$(document).ready(function(){
$('#form_hypescience').html('\
    <style>\n\
        #form_hypescience {\n\
            width: 250px;\n\
            height: 250px;\n\
        }\n\
        #form_hypescience p {\n\
            margin: 0;\n\
            padding: 0;\n\
        }\n\
        #form_hypescience label {\n\
            font-size: x-small;\n\
            display: block;\n\
        }\n\
        #form_hypescience input[type=text], textarea{\n\
            font-size: x-small;\n\
            width: 240px;\n\
        }\n\
        #form_hypescience textarea {\n\
            height: 40px;\n\
        }\n\
        #form_hypescience button {\n\
            background:#000000 none repeat scroll 0 0;\n\
            border: medium none;\n\
            color: #e7e7e7;\n\
            padding: 1px;\n\
            font-size: 60%;\n\
        }\n\
    \n\
    </style>\n\
    \n\
    <form class="form_hypescience" method="post" action="<!URL_PROCESS_FORM_DATA!>">\n\
    <p>\n\
        <label for="nome">Seu Nome</label>\n\
        <input type="text" id="nome" name="nome" size="30" />\n\
    </p>\n\
    <p>\n\
        <label for="email">Seu e-mail</label>\n\
        <input type="text" id="email" name="email" size="30" />\n\
    </p>\n\
    <p>\n\
        <label for="emails_amigos">E-mail dos seus amigos</label>\n\
        <textarea id="emails_amigos" name="emails_amigos" cols="10" rows="3"></textarea>\n\
    </p>\n\
    <p>\n\
        <label for="mensagem">Mensagem</label>\n\
        <textarea id="mensagem" name="mensagem" cols="10" rows="3"></textarea>\n\
    </p>\n\
    <p>\n\
        <label for="captcha">Digite o texto ao lado</label>\n\
        <input type="text" id="captcha" name="captcha" size="15" />\n\
    </p>\n\
    <button type="button" id="enviar">Enviar</button>\n\
    </form>\n\
    <span id="retorno_envio_form"></span>'
);
$('#enviar').click(function(){
    var parametros = new Array();
    parametros.push('nome=' + $('#nome').val());
    parametros.push('email=' + $('#email').val());
    parametros.push('emails_amigos=' + $('#emails_amigos').val());
    $('#retorno_envio_form').html('\
        <script type="text/javascript" \n\
        src="<!URL_PROCESS_FORM_DATA!>?' +
        encodeURI(parametros.join('&')) +
        '"></script>\n\
    ');
});});

我通过 javascript 包含发送表单数据（因为浏览器的安全模型涉及到不同域的请求）。在 FireFox 中，代码运行良好，当我注意到 Microsoft 浏览器上的此代码在单击按钮时会发送两次请求时，我只是想知道下一步。我使用了一个名为 Fiddler 的程序来确认这一事实。

这是第一个请求的示例：

GET /teste/process_form.php?nome=maria%20&email=o%20cara&emails_amigos=um@email.com HTTP/1.1

现在是第二个请求（发生在第一个请求之后）：

GET /teste/process_form.php?nome=maria%20&email=o%20cara&emails_amigos=um@email.com&_=1251168480125 HTTP/1.1

我尝试过使用 preventDefault()（在函数末尾返回 false），关闭表单，使用 input type='submit' 而不是按钮，使用链接而不是按钮，创建使用 $('body').append() 的脚本。有人有什么想法可以在这里提供帮助吗？

提前致谢。 ps：我尝试过的代码就像seth说的：

$('#data_form').submit(function(){
    var parametros = new Array();
    parametros.push('nome=' + $('#nome').val());
    parametros.push('email=' + $('#email').val());
    parametros.push('emails_amigos=' + $('#emails_amigos').val());
    parametros.push('mensagem=' + $('#mensagem').val());
    $('#retorno_envio_form').html('\
        <script type="text/javascript" \n\
        src="<!URL_PROCESS_FORM_DATA!>?' +
        encodeURI(parametros.join('&')) +
        '"></script>\n\
    ');
    return false;
});

Answer 1

编辑

好的，原来的答案是错误的。您的表单正在执行 POST，但您看到两个 GET 请求。对于那个很抱歉。第一次错过了。

与其在 HTML 中写出 script 标签，不如直接使用$.getScript 函数？

$('#enviar').click( function(evt) {
  var parametros = new Array();
  parametros.push('nome=' + $('#nome').val());
  parametros.push('email=' + $('#email').val());
  parametros.push('emails_amigos=' + $('#emails_amigos').val());
  $.getScript('<!URL_PROCESS_FORM_DATA>?' + encodeURL(parametros.join('&') ),
    function() {
     // something you'd like to do afterwards
    });
});

这是因为当点击提交按钮时表单正在提交，然后你的 JS 调用也会进行。

您可以阻止我连接到表单中的 onsubmit（而不是 onclick）。

像这样：

  $("#id_to_your_form").submit(function() {
     var parametros = new Array();
     parametros.push('nome=' + $('#nome').val());
     parametros.push('email=' + $('#email').val());
     parametros.push('emails_amigos=' + $('#emails_amigos').val());
     $('#retorno_envio_form').html('\
         <script type="text/javascript" \n\
          src="<!URL_PROCESS_FORM_DATA!>?' +
          encodeURI(parametros.join('&')) +
     '"></script>\n');
      return false;
  });

return false 将阻止表单提交。