用jquery发布表单并在新窗口中打开

时间:2011-07-30 14:35:10

标签: jquery ajax

我有一个页面包含jquery和两个文本框

我有一个带有以下脚本的按钮

  <input name="text1" type="text" id="text1" />
   <input name="text2" type="text" id="text2" />

<A class="floatRight button buttonAction3" href="#" name="save" id="save">Send</A>

我想要一个Jquery脚本来加载send.php

点击上面的按钮

并且两个文本框的数据都将作为帖子发送

和send.php将在新窗口中打开,指定宽度和高

实际上我不想使用$ .post处理数据。

我想要的是用

打开新窗口
window.open()

然后在该窗口中打开一个带有帖子数据的php文件。

由于

2 个答案:

答案 0 :(得分:2)

您问题的快速回答是使用表单并为其添加target =“_ blank”属性,但这并不能控制宽度和高度。

但是,我认为你应该改变你处理这种情况的方式。这种方法会使它在屁股上大大增加痛苦。利用s。 jQuery可以比整个页面中的随机输入元素更容易处理表单。

<form id="search" method="post" action="send.php">
  <input type="hidden" name="id" value="25">
  <input type="text" name="email" placeholder="bill@stackoverflow.com">
  <input type="submit" value="Send">
</form>

现在我们可以做到:

  // Sweet, the form was submitted...
  $('#search').submit(function(e){

    // Let's get the form with jQuery...
    $form = $(this);

    // Now you can do things like...
    $.post( $form.attr('action'), $form.serializeArray(), function( result ) {
        // "result" will inclue whatever the script returns...
    });

    // If you really need to open up the new window the only way I can think of controlling the size is with a get request...
    window.open( $form.attr('action') + '?' + $form.serialize(), 'PopUp', 'width=100,height=100' );

    // Stop the browsers default behavoir from kicking in!
    e.preventDefault()


});

答案 1 :(得分:1)

$(document).ready(function() {
    $("#save").click(function(e) {
        e.preventDefault();
        $.post("send.php", { text1 : $("#text1").val(), text2 : $("#text2").val() },
              function(html) {
                  // open new window here
              }
    });
});

鉴于您的元素未包含在表单中,上述内容就足够了。说明:

  • 将点击处理程序绑定到保存按钮。使用e.preventDefault()阻止链接的默认“操作”。
  • 使用jQuery的$.post高级ajax方法发布文本输入的两个值。
  • send.php将收到一个类似于array("text1" => "thetext", "text2" => "thetext")
  • 的$ _POST数组
  • 服务器将响应发送回客户端后,$.post的成功回调函数会触发。那就是你想要打开新窗口的地方。

参考: