从单一形式发布到两种不同的方法

时间:2013-06-20 09:55:00

标签: javascript html

我有一个带有用户名和密码的HTML表单。一旦我点击提交按钮,我想在两个不同的服务器上发布两个不同的PHP方法。如何才能做到这一点?可以使用HTML表单完成吗?或者我应该使用JavaScript?有什么建议吗?

更新

我尝试了以下代码,但它无效。我错在哪里?提前谢谢..!

<!DOCTYPE html><!--HTML5 doctype-->
<html>
    <head>
        <title id="login_form">Login Form testing</title>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">

         $('#loginform').submit(function(){
               $("form" ).on( "submit", function( event ) { 
      event.preventDefault(); // prevent the default submission behavior
      var data = $(this).serialize(); // gather data from the form and serialize it
      $.post('URL_1', data, successAction1); // post it to destination 1
      $.post('URL_2', data, successAction2); // post it to destination 2
 });

 var successAction1 = function() { alert("Success one");};
 var successAction2 = function() { alert("Success two");};


});
        </script>
        </head>
        <body>
        <form id="loginform" action="">
<fieldset >
<legend>Login</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>

<label for='username' >UserName*:</label>
<input type='text' name='username' id='username'  maxlength="50" />

<label for='password' >Password*:</label>
<input type='password' name='password' id='password' maxlength="50" />

<input type='submit' name='Submit' value='Submit' />

</fieldset>
</form>
        </body>

3 个答案:

答案 0 :(得分:3)

您可以使用AJAX发布它,例如。 JQuery图书馆:

 $( "form" ).on( "submit", function( event ) { // listen to form submission (use whatever selector suits you, but make sure it is the form itself)
      event.preventDefault(); // prevent the default submission behavior
      var data = $(this).serialize(); // gather data from the form and serialize it
      $.post('URL_1', data, successAction1); // post it to destination 1
      $.post('URL_2', data, successAction2); // post it to destination 2
 });

 var successAction1 = function() { /*what to do after 1st post*/};
 var successAction2 = function() { /*what to do after 2nd post*/};

我建议您阅读有关$.serialize$.post

的api文档

答案 1 :(得分:2)

是的,这可以做到,但你需要一些javascript。

假设这是你的表格:

<form id="#login">
  <p>
   <label>
     Username:
     <input type="text" name="username" />
   </label>
  </p>
  <p>
    <label>
      Password:
      <input type="password" name="password" />
    </label>
  </p>
  <p>
    <button type="submit">Login</button>
  </p>
</form>

然后这个JavaScript将帮助您入门:

$('#login').on('submit', function(e) {
  e.preventDefault(); // stops the normal functionality of the form
  $.ajax({
    url: 'http://website1.com',
    data: $(this).serialize(),
    success: (data) {
      // do whatever
    }
  });
  $.ajax({
    url: 'http://website2.com',
    data: $(this).serialize(),
    success: (data) {
      // do whatever
    }
  });
});

您需要在页面上安装jQuery才能使此解决方案正常运行。

结帐http://api.jquery.com/jQuery.ajax/了解有关查询ajax的更多详情。

此外,如果您确实发布到具有不同域名的不同网站,您将遇到跨域问题。这里的解决方案是使用CORS。您将在stackoverflow上找到许多解决方案。

答案 2 :(得分:1)

使用JavaScript onclick函数并调用两个函数。使用ajax