Wordpress Admin AjaxでFormDataを使用すると、「0」という応答しか返されません。通常これはアクションがないためですが、私はアクションを含め、それでも問題を抱えています。私はここでも同様の質問を見ましたが、彼らは皆jQueryが使われていると仮定しています、そして私の場合はそうではありません。
Javascript:
if ($this.valid()) {
var form_data = new FormData(form);
form_data.append('security', WP.nonce);
form_data.append('action', form.action);
console.log(form.action); // console shows http://test.dev/newsletter_signup
u.jax.post(WP.ajax, form_data, onSent);
function onSent(result) {
if (result.success) {
$this.html('<p class="form-sent">' + $this.data('success') + '</p>');
} else {
$this.html('<p class="form-sent">' + result.data + '</p>');
}
}
}
PHP:
add_action('wp_ajax_newsletter_signup', 'newsletter_signup');
add_action('wp_ajax_nopriv_newsletter_signup', 'newsletter_signup');
HTML:
<form action="newsletter_signup" class="newsletter-signup js-process-form" autocomplete="off">
<div class="field">
<label for="newsletter-email" class="field__label">Your Email Address</label>
<input type="email" class="field__input" name="email-address" id="newsletter-email" required data-msg-required="We need to know your email address" value="[email protected]">
<button type="submit" class="field__button">submit</button>
</div>
</form>
私が見ることができる唯一の問題は、アクションがその前にドメインを追加しているということです。私がjquery ajaxを使ってこれを実行した場合、それはうまく機能するので、コードはjavascriptに任せます。私はajax関数を提供することができますが、それらはかなり一般的です。
必要なコードが他にあれば、教えてください。
ありがとう。
コメントを編集:
コメントに記載されているように、フォームを隠しアクション入力フィールドに変更してみました。
<form action="">
<input type="hidden" name="action" value="newsletter_signup"/>
<div class="field">
<label>Your Email Address</label>
<input type="email" name="email-address">
<button type="submit">submit</button>
</div>
</form>
これは送信時に送信されるフォームデータです。
------WebKitFormBoundarycskAgc8KcinCzpoG
Content-Disposition: form-data; name:"action"
newsletter_signup
------WebKitFormBoundarycskAgc8KcinCzpoG
Content-Disposition: form-data; name="email-address"
[email protected]
------WebKitFormBoundarycskAgc8KcinCzpoG--
そしてそれはに送られています:
http://test.dev/wp-admin/admin-ajax.php
編集#2:
次のように取得リクエストを送信します。
u.jax.get('http://test.dev/wp-admin/admin-ajax.php?action=newsletter_signup&email-address=t[email protected]', function(s){
console.log(s)
});
また、0
の応答になります。
ここに私のjs ajax関数があります。
// ===== Ajax Utilities
// Handles Ajax Responses
function _handleResponse(request, success) {
request.onreadystatechange = function() {
if (request.status >= 200 && request.status < 400) {
if (typeof request.responseText == 'string') {
data = request.responseText;
} else {
data = JSON.parse(request.responseText);
}
success(data);
} else {
return request.status + ' failed request: '+ JSON.parse(request.responseText);
}
};
request.onerror = function() {
return request.status + ' failed request: '+ JSON.parse(request.responseText);
};
}
// Ajax GET & POST
u.jax = {
get: function(url, success) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.send(null);
_handleResponse(request, success);
},
post: function(url, data, success) {
var request = new XMLHttpRequest();
request.open('POST', url, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
_handleResponse(request, success);
}
};
GetリクエストのPostmanヘッダ:
Cache-Control →no-cache, must-revalidate, max-age=0
Connection →Keep-Alive
Content-Length →1
Content-Type →text/html; charset=UTF-8
Date →Fri, 03 Mar 2017 16:16:54 GMT
Expires →Wed, 11 Jan 1984 05:00:00 GMT
Keep-Alive →timeout=5, max=100
Server →Apache/2.4.20 (Unix) PHP/5.5.35 mod_wsgi/3.5 Python/3.5.1 OpenSSL/1.0.1p
X-Content-Type-Options →nosniff
X-Frame-Options →SAMEORIGIN
X-Powered-By →PHP/5.5.35
X-Robots-Tag →noindex
そのため、唯一の問題はヘッダーコンテンツタイプでした。
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
を削除し、それを省略するだけで、うまくいきました。フォームアクションもつかまれて追加されています。
Ajaxの呼び出し:
var formData = new FormData(form);
formData.append('security', WP.nonce);
formData.append('action', form.getAttribute('action'));
u.jax.post(WP.ajax, formData, onSent);
Ajaxの機能:
u.jax.post = function(url, data, success) {
var request = new XMLHttpRequest();
request.open('POST', url, true);
request.send(data);
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (typeof request.responseText == 'string') {
data = request.responseText;
} else {
data = JSON.parse(request.responseText);
}
success(data);
return;
}
};
}
形:
<form action="newsletter_signup">
<div class="field">
<label>Your Email Address</label>
<input type="email" name="email-address">
<button type="submit">submit</button>
</div>
</form>
PHP:
function newsletter_signup(){
// Get the email address
$email = sanitize_email($_POST['email-address']);
// Do what you wish with the email address.
//Setup the data to send back
$data = array();
// json encode the data to send back
echo json_encode($data);
exit;
}
add_action('wp_ajax_newsletter_signup', 'newsletter_signup');
add_action('wp_ajax_nopriv_newsletter_signup', 'newsletter_signup');
FormDataは、フォームデータの一部としてフォームタグのアクションを処理します。それがadmin-ajax.phpに送信されたくない場合です。 admin-ajax.phpへのアクションとして 'newsletter_signup'を送信する別の方法を見つけるようにしてください。主にあなた自身の配列を構築することによってです。
var form_data = new FormData(form);
form_data.append('security', WP.nonce);
form_data.append('value', form.value);
// etc. etc., for each value you want to send
var formData = {
action: 'newsletter_signup',
data: form_data
}
u.jax.post(WP.ajax, formData, onSent);
また、0を送っているのは何ですか?それはadmin-ajax.phpですか、それともphpスクリプトのどこかでこのフォームデータを処理しているdie()
ですか。