使用ajax将表单内容发送到外部URL

时间:2012-01-10 15:58:12

标签: jquery ajax

我无法将表单数据发送到外部网址。我明白我需要建立一个PHP桥来实现这一目标,但这就是我堕落的地方。

表单标记:

<div class='done' style='background:#fffee1;border:1px solid #fdf96c;padding:10px;'>
    Success!  We'll be in touch soon
</div>
<div class='form'>
    <form method='post' action='http://example.com/external-url'>
        <input type="hidden" name="idstamp" id="idstamp" value="would need to pass this too" />
        <p class='element'>
            <label for='account'>Client Name</label>
            <input type='text' id='account' name='account' class='text' />
        </p>
        <p class='element stack'>
            <label for='user'>User Name</label>
            <input type='text' id='user' name='user' class='text' />
        </p>                    
        <p class='element stack'>
            <input type='submit' class='button orange' value='Submit' style='padding:0; width:130px;height:30px' id='submit'/>
            <div class='loading'></div>
        </p>
    </form>
</div>

动作是基本的,只显示成功div然后隐藏整个表单div:

$('.form').fadeOut('slow');                 

//show the success message
$('.done').fadeIn('slow');
$('.toggle').delay(5000).fadeOut('slow');

缺少的部分是发送到本地.php文件,解析出数据然后发送到外部URL。我到处搜索这个,似乎无法找到一个简单的解决方案,并希望在这里找到一个。

1 个答案:

答案 0 :(得分:1)

这是jquery部分:

$(function(){
...
$(".form form").submit(function(e){
  e.preventDefault();
  var formData = $(this).serialize();
  $.post("bridge.php",formData).done(function(rdata){
    if (window.console && window.console.log) {
      console.log(rdata);
    }
  }).fail(function(){
    if (window.console && window.console.log) {
      console.log(arguments);
    }
  });
});
...
});

现在你只需要构建接受POST变量的bridge.php并将它们发送到外部URL。