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

Question

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

phphtmlxmlformsapi

3

好的，这是我的情况。

我有一个包含简单表单（询问姓名、号码等）的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">

感谢您的帮助！

- Omran

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- peterm · Accepted Answer

使用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 :

作为一种解决方法，您可以使用代理。您可以在这里阅读有关它的信息并下载简单的代理这里。

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

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