使用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) {
window.location = "congrats.html";
},
error: function(jqXHR, textStatus, errorThrown){
alert("It's a failure!");
}
});
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) {
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){
alert("textStatus: " + textStatus + "\n" + "errorThrown: " + errorThrown);
}
});
return false;
});
});
</script>
我在我的电脑上测试了它,它返回了正确的JSON响应。
<link rel="stylesheet" href="css/style.css">
之后添加以下行<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
。我已经将其添加到了您的 patebin 中。 - petermconsole.log
来打印它。对我来说,它返回{"status": {"http_code": 200},"contents": {"message-count": "1","messages": [{"error-text": "Bad Credentials","status": "4"}]}}
因为我没有任何有效凭据进行身份验证。长话短说-分析返回的数据。 - petermalert
函数来输出data
对象的任何属性。请参考修改后的答案。 - peterm