将表单重定向到另一个页面而不是 API

Question

好的，这是我的情况。

我有一个 php 文件，其中包含一个简单的表单，询问姓名、号码等。 现在，当我单击提交时，我将表单操作设置为处理这些变量的 API 的 URL。

问题是，当我提交表单时，它会将我带到 API 网站使用一些乱码 xml 文本确认提交的页面。

我想做的是能够让用户填写表单数据，秘密地将该数据提交到 API URL，并为用户显示一个感谢页面。我不希望用户知道 API 的确认页面，只是提交表单，直接将他带到感谢页面。

API接受以下形式的请求

"MY-API-URL.com/json?api_key=KEY&api_secret=SECRET&login=LOGIN&password=PASSWORD"

这是表格标题..

<form action="MY-API-URL.com" class="login">

感谢任何帮助！

Answer 1

进行 ajax 调用以提交您的表单。

像这样制作一个自我提交的表单action=""：

<form id="login" name="login" action="" method="POST">
    <input type="text" name="login" value="">
    <input type="password" name="password" value="">
    <input type="submit" name="submit" value="Log in">
</form>

使用 jQuery 处理表单的提交事件：

<script>
$(function(){
    $("form#login").submit(function(){
        var login = $("input[name=login]").val();
        var password = $("input[name=password]").val();

        $.ajax({
            url: "MY-API-URL.com/json", 
            type: "POST",
            data: {"api_key":"KEY", "api_secret":"SECRET", "login":login, "password":password},
            dataType: "jsonp",
            cache: false,
            success: function (data) {              
                //make your redirect here or just display a message on the same page
                window.location = "congrats.html";
            },
            error: function(jqXHR, textStatus, errorThrown){
                // handle your error here
                alert("It's a failure!");
            }       
        });
        //cancel the submit default behavior
        return false;
    });
});
</script>

更新：
据我了解 nexmo 不支持 jsonp 并且您不能使用 json 因为您正在进行跨域调用。 这里有很多关于它的帖子。例如json Uncaught SyntaxError: Unexpected token :

作为一种解决方法，您可以使用代理。你可以阅读它here 并下载简单的代理here。

如果您使用上面提到的代理，您的代码将如下所示：

<script> 
$(function(){ 
    $("form#sms").submit(function(){ 
        var from = $("input[name=from]").val(); 
        var to = $("input[name=to]").val(); 
        var text = $("input[name=text]").val(); 

        var url = "http://rest.nexmo.com/sms/json?api_key=key&api_secret=secret" + "&from=" + from + "&to=" + to + "&text=" + text; 
        $.ajax({ 
            url: "simple-proxy.php", 
            type: "GET", 
            data: {"url": url}, 
            dataType: "json", 
            cache: false, 
            success: function (data) {               
                //make your redirect here or just display a message on the same page 
                console.log(data); 
                if (data && data.contents && data.contents.messages && data.contents.messages.length) {
                    alert("The status is: " + data.contents.messages[0].status);
                }
                alert("SMS sent!"); 
            }, 
            error: function(jqXHR, textStatus, errorThrown){ 
                // handle your error here 
                alert("textStatus: " + textStatus + "\n" + "errorThrown: " + errorThrown); 
            }       
        }); 
        //cancel the submit default behavior 
        return false; 
    }); 
}); 
</script> 

我让它在我的机器上运行，它返回了正确的 json 响应。