web-dev-qa-db-ja.com

管理AjaxとHTML5フォームデータ

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_si‌​gnup&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
ajaxjavascriptforms
1
evu

そのため、唯一の問題はヘッダーコンテンツタイプでした。

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');
2
evu

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()ですか。

1
Spartacus