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响应。

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

1 个答案: