web-dev-qa-db-ja.com

を使う AJAX フォームを送信するためのプラグインで - 本当に混乱している

Wordpressのすべてのajaxフックと関数を使うのに少し問題がある。

この記事を読んでいる： WordpressでAjaxを使うための5つのヒント

しかし、すべてのコードを試してAjaxフォームに適用した後で混乱しました。

私は自分のプラグインクラスから "Swoon"を介してユーザーのために単一の投稿ページでからエコーする関数を呼び出しています。フォームはうまく印刷されます。これがフォームコードです：

//the html form for the front end
function ds_swoons_form(){
global $post, $current_user;
get_currentuserinfo();

    $form = '<div id="swoon-response">';
    $form .= '</div>';

    $form .= '<form id="entry_swoon_form" name="entry_swoon_form" action="" method="POST">';
        $form .= '<input type="hidden" name="ds_postid" value="'.$post->ID.'" />';
        $form .= '<input type="hidden" name="ds_userid" value="'.$current_user->ID.'" />';
        $form .= '<input type="submit" value="Swoon" class="swoon-submit" />';
    $form .= '</form>';

return $form;
}//end ds_swoons_form

私のエンキュー：

wp_enqueue_script('json-form');

// embed the javascript file that makes the swoons AJAX request
wp_enqueue_script( 'swoon_ajax_request', plugins_url('ds-swoons/js/swoon-ajax-form.js'), array( 'jquery' ) );

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'swoon_ajax_request', 'SwoonAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

//add the AJAX action
add_action( 'wp_ajax_swoons_submit_action', array('DS_Swoons','ds_ajax_swoons_form_submit') );

そして私のjavascript：

jQuery('#entry_swoon_form').ajaxForm({
target: '#swoon-response',
dataType: 'html',
data: {
       action: 'swoons_submit_action'
      },
url: SwoonAjax.ajaxurl,
success : function(responseText) {      
    jQuery('#swoon-response').html('Swooned!');
}
});

それがAJAXになると私は初心者です。私が読んだ記事は、それがサンプルのajaxFormリクエストを表示して見失ってしまうまで終わらないうちに良かったです。

Ajaxフォーム関数は実行されず、ページはリロードされるだけです。 SO私のエンキュー機能の1つが正しくないと思います。

事前に感謝します。

編集------------------------------------------------- -------新しいjQuery.postメソッドコード - しかしそれはまだ動作していません

jQuery(document).ready(function(){
jQuery('.swoon-submit').click(function(){
    jQuery.post(
        // see tip #1 for how we declare global javascript variables
        SwoonAjax.ajaxurl,
        {
            // here we declare the parameters to send along with the request
            // this means the following action hooks will be fired:
            // wp_ajax_nopriv_myajax-submit and wp_ajax_myajax-submit
            action : 'swoons_submit_action',
            //nonce for validation
            //swoonNonce : SwoonAjax.swoonNonce,
            // other parameters can be added along with "action"
            postid : SwoonAjax.postid,
            userid : SwoonAjax.userid
        },
        function( response ) {
            alert( response );
        }
    );
});
console.log(SwoonAjax.ajaxurl)
});

FireBugでは本当に素早いエラーが発生しますが、要求が終了する前にはどうすればいいのかがすぐにわかりません。そして.postが実行された後にエラーは残りません。 DB内のデータが更新されていないため、解雇されていないことがわかります。

ありがとう

編集2 ------------------------------------------------ -----------------

送信するフォームを取得しました。次のコードを使用してDBを更新します。

jQuery(document).ready(function(){
jQuery('.swoon-submit').click(function(){
    var $form = $( 'form#entry_swoon_form' ),
        postid = $form.find( 'input[name="ds_postid"]' ).val(),
        userid = $form.find( 'input[name="ds_userid"]' ).val();
    jQuery.post(
        // see tip #1 for how we declare global javascript variables
        SwoonAjax.ajaxurl,
        {
            // here we declare the parameters to send along with the request
            // this means the following action hooks will be fired:
            // wp_ajax_nopriv_myajax-submit and wp_ajax_myajax-submit
            action : 'swoons_submit_action',
            //nonce for validation
            //swoonNonce : SwoonAjax.swoonNonce,
            // other parameters can be added along with "action"
            ds_postid: postid,
            ds_userid: userid

        },
        function( response ) {
            alert( response );
        }
    );
    return false;
});

ただし、フォームフィールドの値（非表示）をDB挿入用のPHP関数に送信することはできません。情報はFirebugコンソールに送信されたものとして表示されますが、PHP関数には情報が入りません。 PHP関数にフィールドを送信する方法と関係がありますが、よくわかりません。ありがとうございます。

plugin-developmentajaxforms
3
dkmojo

確認できること

  1. ページのソースを見て、jsファイルが含まれているかどうか、そして順番が正しいかどうかを調べます。
  2. jsファイルに正しいパスが入っているかどうかを確認するには、console.log(SwoonAjax.ajaxurl)を使用します。
  3. FirebugでConsoleタブに切り替えてから、AJAXリクエストを起動してみてください。ここでの処理と、もしあればエラーが表示されます。
  4. AJAX用にjQueryのjquery.postメソッドを使ってみてください。簡単です。

これらのチェックは問題の特定に役立ちます。

ちょっとしたコツ：plugins_url('ds-swoons/js/swoon-ajax-form.js')をplugins_url('js/swoon-ajax-form.js', __FILE__)に変更してください。これで正しいプラグインフォルダが得られます。

4
Rutwick Gangurde

この関数を使ってWordPressのajax add_action( 'wp_ajax_swoons_submit_action', array('DS_Swoons','ds_ajax_swoons_form_submit') );をバインドしたので、 swoons_submit_action という名前のアクション変数を渡す必要があります。そうでなければWordPressのadmin-ajax.phpはそれを拒否します。

データを送信するためにこのスニペットを使用しますか？

$('#entry_swoon_form').submit(functions() {
    var data = $(this).serialize();
    $.ajax({
        type: 'post',
        url: ajaxurl,
        dataType: 'json',
        data: data + '&action=swoons_submit_action',
        cache: false,
        success: function(response){
            console.log(response);
        }
    }); 
});
1
Tareq