我目前有一个表单,它正在使用GET方法向附属公司提交数据。问题是,当用户填写表单时,他们被重定向到与GET操作相同的URL,这是一个随机代码的api页面。
我需要填写表单的用户被重定向到我主办的感谢页面,而表单中的信息仍被发送到该附属api页面。
我不能操纵从属api页面。我该怎么做呢?我已经听到了不同的答案,包括POST,Iframe,ajax,onsubmit。
谁能确认哪种方法效果最好,为什么?
发布于 2012-08-14 04:06:17
编辑在聊天中讨论了一些事情后,我们得出结论,服务器端发布是一种更好的方法。下面是一个实现示例:
HTML:
<form id="my_form">
<!-- form elements -->
</form>
<div id="status_message"></div>
Javascript:
$('#my_form').on('submit', function (e){
$.ajax({
type: "POST",
url: "localProxy.php",
data: $('#my_form').serialize(),
success: function (response) {
// do something!
},
error: function () {
// handle error
}
});
});
PHP (localProxy.php)
$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, 'http://thirdpartydomain.internet/login_url.php');
curl_setopt ($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt ($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6");
curl_setopt ($ch, CURLOPT_TIMEOUT, 60);
curl_setopt ($ch, CURLOPT_FOLLOWLOCATION, 0);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_POSTFIELDS, $_POST);
curl_setopt ($ch, CURLOPT_POST, 1);
$result = curl_exec ($ch);
curl_close($ch);
// do something with the data on your end (if anything), or render the "thank you" page
die('<h1>Thanks!</h1>');
原始答案
有几种方法。
第一种方式是(通过标记)提到您有jQuery --在这种情况下,您可以使用jquery的ajax
方法将数据发布到jquery,也可以将数据发布到您自己的服务器以获得感谢消息。
<form id="my_form">
<!-- form elements -->
</form>
<div id="status_message"></div>
..。在你的"ready“函数中:
var API_URL = 'http://www.some-api-provider.com/api.php';
var MY_URL = 'http://www.my-website.net/post_handler.php';
$('#my_form').on('submit', function (e){
e.preventDefault();
var error = false;
// validation here, if there is an error, set error = true;
if (error == true) {
alert('There was a problem!'); // do something better than this!
return false;
}
$.ajax({
type: 'GET',
url: API_URL,
data: $('my_form').serialize(),
success: function () {
$.ajax({
type: 'POST',
url: MY_URL,
data: $('#my_form').serialize(),
success: function (response) {
$('status_message').html(response);
},
error: function () {
alert('There was a problem!'); // do something better than this!
}
});
},
error: function () {
alert('There was a problem!'); // do something better than this!
}
});
return false;
});
那是怎么回事?我们使用on
事件将事件侦听器绑定到表单的“submit”事件。当用户单击Submit按钮时,将调用该侦听器代码。
反过来,它将序列化表单的数据,然后通过GET将API发送给它。只要能正常工作,它就会调用成功函数,该函数将通过POST将数据发送到您的服务器。div status_message
将使用从服务器返回的结果进行更新。
另一种方法是正常地将数据发布到服务器,然后使用cURL或其他服务器端HTTP连接将数据提交给应用编程接口。我可能更喜欢这种方法,因为它对javascript的依赖较少;如果您的用户关闭了脚本,javascript方法将失败。
如果不知道您使用的是什么服务器端技术,我无法给出任何示例,但如果您走这条路并遇到麻烦,您总是可以问另一个问题!
Documentation
jQuery.ajax()
- http://api.jquery.com/jQuery.ajax/jQuery.on()
- http://api.jquery.com/on/WebRequest
教程- http://msdn.microsoft.com/en-us/library/debx8sh9.aspx发布于 2012-08-14 03:53:19
使用ajax和onSubmit事件将数据发送到您的api,然后重定向。
$('form').onSubmit(function(){
$.ajax({
... //your informations to send to the api
success:function(){
...//your redirection to the success page
}
});
});
有关ajax in jquery的更多信息
发布于 2012-08-14 03:55:12
使用jquery是一个很好的方法。下面是我会怎么做
$("#formID").submit(function()
{
$.get('getUrl', { param1Name: param1Data, param2Name: param2Data (etc...) }, function(data)
{
document.location = "redirectURL";
});
return false;
});
https://stackoverflow.com/questions/11945501
复制