Javascript 使用AJAX的Mailchimp API调用
我正在使用Javascript 使用AJAX的Mailchimp API调用,javascript,php,ajax,mailchimp,Javascript,Php,Ajax,Mailchimp,我正在使用 error:function(exception){alert('Exception:'+ JSON.stringify(exception));} 如果出现AJAX错误,则显示异常,下面是我得到的响应: Exception:{"readyState":4,"responseText":"","status":200,"statusText":"OK"} 对我来说,这似乎是一个成功的响应,但在error上调用的函数意味着出现了问题 以下是网页: 我有一个成功的API调用,使用表单
error:function(exception){alert('Exception:'+ JSON.stringify(exception));}
如果出现AJAX错误,则显示异常,下面是我得到的响应:
Exception:{"readyState":4,"responseText":"","status":200,"statusText":"OK"}
对我来说,这似乎是一个成功的响应,但在error
上调用的函数意味着出现了问题
以下是网页:
我有一个成功的API调用,使用表单操作订阅一个新的电子邮件地址给mail chimp。但是我不想在表单提交后重定向到另一个页面,所以我去掉了“form action”属性,并尝试将此API调用添加到使用ajax的script.js中
以下是HTML:
<form class="email_form_freemonth" method="post">
<h3>Get your first month free</h3>
<div class="form-group customised-formgroup"> <span class="icon-user"></span>
<input type="text" name="full_name" class="form-control" placeholder="Name">
</div>
<div class="form-group customised-formgroup"> <span class="icon-envelope"></span>
<input type="email" name="email" class="form-control" placeholder="Email">
</div>
<!--<div class="form-group customised-formgroup"> <span class="icon-telephone"></span>
<input type="text" name="phone" class="form-control" placeholder="Phone (optional)">
</div>-->
<div class="form-group customised-formgroup"> <span class="icon-laptop"></span>
<input type="text" name="website" class="form-control" placeholder="Website (optional)">
</div>
<!--<div class="form-group customised-formgroup"> <span class="icon-bubble"></span>
<textarea name="message" class="form-control" placeholder="Message"></textarea>
</div>-->
<div>
<br>
<button style="margin: 0 auto" name="submit" type="submit" class="btn btn-fill full-width">GET FREE MONTH<span class="icon-chevron-right"></span></button>
</div>
</form>
我认为您需要在第一个调用ajax{}下添加第二个调用{into}
$('.email\u form\u freemount')。关于('submit',函数(e){
e、 预防默认值();
var _self=$(本);
变量选择器=_self.closest('input,textarea');
_self.closest('div')。find('input,textarea')。removeAttr('style');
_self.find('.msg').remove();
_self.closest('div').find('button[type=“submit”]”).attr('disabled','disabled');
var data=$(this.serialize();
$.ajax({//WORKS)
url:'scripts/email_freemount.php',
类型:“post”,
数据类型:“json”,
数据:数据,
成功:功能(数据){
_self.closest('div')。find('button[type=“submit”]”)。removeAttr('disabled');
if(data.code==false){
_self.closest('div').find('[name=“'+data.field+'”).css('border-bottom','solid 2px-red');
_self.find('.customized formgroup').last().after('*'+data.err+'
');
}否则{
$('.msg').html(''+data.success+'
');
_self.find('.customized formgroup').last().after(''+data.success+'
');
_self.closest('div').find('input,textarea').val('');
}
}
//因为您正处于事件提交“表单”下,而您的ajax帖子是在这一事件之后发布的
$.ajax({
url:'scripts/freemount_action.php',
类型:“post”,
数据类型:“json”,
成功:功能(数据){
警报(数据);
}
});
})
当您通过AJAX请求传递序列化数据时,if(isset($\u POST['submit'])
不会计算为true,因为该按钮不是通过请求发送的数据的一部分。您可以使用if($\u SERVER['request\u METHOD']==“POST”)
而是检查请求是否已提交。只要在您的PHP文件中更新它,它就会工作!我认为您不能在另一个ajax调用中运行一个ajax调用,因为当我尝试您的代码时,我的IDE中出现语法错误。请阅读本文,我只是告诉您需要在第一个调用下添加调用,因为这是submit的操作触发器第二个可以在第一个的末尾调用,即我们在异步世界中的交易,但我们需要事件来调用它(提交、单击、onload…),第二个函数ajax需要一个匿名函数成功我尝试按照你给出的链接中的建议将一个ajax调用放入另一个ajax调用中,但我仍然得到相同的错误。所有响应状态都是200,但freemonth_action.php的响应体为空,应该包含我认为是的内容,并且需要在页面中查找f首先调用ajax类名.msg,因为在success ajax中,您将一些html附加到页面$('.msg').html(''+data.success+'
);_self.find('.customized formgroup').last()。之后(''+data.success+'
');如果此html标记不包含此.msg类,脚本停止告诉我您的错误可能是我可以在线显示一些吗?问候。我更新了该行,但仍会收到由该行引起的异常警报到屏幕:error:function(异常){alert('exception:'+JSON.stringify(exception));}
,但我仍然得到所有状态响应为200,这很奇怪。我不确定如何调试php,因为我无法向文档回显错误,因为文档从未实际显示给用户。@Tom如果在AJAX请求中去掉数据类型:“json”
,它是否与更新的php文件一起工作?我收到了错误当我昨天试图找出答案时,它没有触发错误,但当未设置dataType
时。我去掉了那一行,现在调用了success函数,而不是error函数,这是一个改进!但是我为ajax调用和第二个调用都发送了数据变量警报(调用mailchimp api)是空的。但我不知道这是否是个问题,因为api调用所需的所有数据都应该在php文件中,该文件从html文件中获取数据,我更新了script.js以显示当前使用的ajax调用。我还采纳了headmax的建议,将一个ajax调用嵌套在“success”中的另一个ajax调用中 response@Tom如果您像原始问题中那样分离请求,只需更新PHP文件就可以了。您可以在script.js中保留dataType:'json'
。
<?php
session_start();
if($_SERVER['REQUEST_METHOD'] == "POST"){
$name = trim($_POST['full_name']);
$email = trim($_POST['email']);
if(!empty($email) && !filter_var($email, FILTER_VALIDATE_EMAIL) === false){
// MailChimp API credentials
$apiKey = '*****';
$listID = '0cf013d1d9';
// MailChimp API URL
$memberID = md5(strtolower($email));
$dataCenter = substr($apiKey,strpos($apiKey,'-')+1);
$url = 'https://' . $dataCenter . '.api.mailchimp.com/3.0/lists/' . $listID . '/members/' . $memberID;
// member information
$json = json_encode([
'email_address' => $email,
'status' => 'subscribed',
'merge_fields' => [
'NAME' => $name,
]
]);
// send a HTTP POST request with curl
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_USERPWD, 'user:' . $apiKey);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, $json);
$result = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
//echo json_decode($result);
// store the status message based on response code
if ($httpCode == 200) {
$_SESSION['msg'] = '<p style="color: #34A853">You have successfully subscribed to CodexWorld.</p>';
} else {
switch ($httpCode) {
case 214:
$msg = 'You are already subscribed.';
break;
default:
$msg = 'Some problem occurred, please try again.';
break;
}
$_SESSION['msg'] = '<p style="color: #EA4335">'.$msg.'</p>';
}
}else{
$_SESSION['msg'] = '<p style="color: #EA4335">Please enter valid email address.</p>';
}
}
$('.email_form_freemonth').on('submit', function (e) {
e.preventDefault();
var _self = $(this);
var __selector = _self.closest('input,textarea');
_self.closest('div').find('input,textarea').removeAttr('style');
_self.find('.msg').remove();
_self.closest('div').find('button[type="submit"]').attr('disabled', 'disabled');
var data = $(this).serialize();
$.ajax({
url: 'scripts/email_freeMonth.php',
type: "post",
dataType: 'json',
data: data,
success: function (data) {
_self.closest('div').find('button[type="submit"]').removeAttr('disabled');
if (data.code == false) {
_self.closest('div').find('[name="' + data.field + '"]').css('border-bottom', 'solid 2px red');
_self.find('.customised-formgroup').last().after('<div class="msg"><p style="color:red;padding:0;font-size:13px;font-weight:bold;position:absolute">*' + data.err + '</p></div>');
} else {
$('.msg').html('<p style="color:green;padding:0;font-size:13px;font-weight:bold;position:absolute">' + data.success + '</p>');
_self.find('.customised-formgroup').last().after('<div class="msg"><p style="color:green;padding:0;font-size:13px;font-weight:bold;position:absolute">' + data.success + '</p></div>');
_self.closest('div').find('input,textarea').val('');
}
}
});
$.ajax({
url: 'scripts/freemonth_action.php',
type: "post",
dataType: 'json',
data: data,
success: function (data) {
_self.closest('div').find('button[type="submit"]').removeAttr('disabled');
if (data.code == false) {
console.log("DATA.CODE == FALSE");
} else {
console.log("DATA.CODE == TRUE");
}
},
error:function(exception){alert('Exception:'+ JSON.stringify(exception));}
});
});