3

さて、これが私の状況です。

名前や番号などを尋ねる単純なフォームを含む php ファイルがあります。[送信] をクリックすると、これらの変数を処理する API の URL にフォーム アクションが設定されます。

問題は、フォームを送信すると、API Web サイトが送信を確認するページが表示され、ややこしい 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">

どんな助けでも大歓迎です！

4

1 に答える 1

2

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応答を返しました。

于 2012-12-23T20:24:14.517 に答える