WordpressでページをリロードせずにJQueryとAJAXに投稿する

Wordpressでプラグインを開発していますが、Ajaxを使用してページをリロードせずに別のPHPファイルにデータを投稿しようとしています。バックエンドでは、PHPファイルはif（isset（））を使用してSQLクエリを実行します。クライアント側では、ユーザーは個々のレコードfadeOutとレコードが正常に削除されたことを確認する必要があります。WordpressでページをリロードせずにJQueryとAJAXに投稿する

更新：フォームボタンがクリックされると、正しいdivがフェードインしてフェードアウトするまで、javascriptは機能しています。しかし、PHPファイルは、var_dumpでテストされているように、値がポストされていません。

HTMLコード：

<!-- problem: when setting "action" to a url, that page is automatically loaded. I want to stay on the existing page. --> 
     <form action='' id='form-delete-assoc' method='post'> 
    <input name='remove_all' type='submit' id='remove-all' value='Remove All'></input> 
    </form>

のjQuery：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('tr.assoc_row').show(); 
     $('#settings-removed-msg').hide(); 
     $('#new-assoc-msg').hide(); 
     $('#formdeleteassoc').submit(function(e){ 
      e.preventDefault(); 

      $.ajax ({ 
       type: 'POST', 
       url: '<?php echo $cb_t2c_remove_all_url; ?>', 
       data: {removeall: 'yes' 
       }, 
       success: function() { 
        $('#settings-removed-msg').fadeIn('fast'); 
        $('tr.assoc_row').fadeOut('fast'); 
        } 
      }); 
     }); 

     $('#formsavesettings').submit(function(){ 
      $('#new-assoc-msg').fadeIn('fast'); 
      }); 
    }); 
</script>

remove_all.php：

<?php 
//remove_all.php 

global $wpdb; 
$prefix = $wpdb->prefix; 

$remove_var_dump = $_POST['removeall']; //returning NULL 
var_dump($remove_var_dump); 

if (isset($_POST['removeall'])){ 
    $wpdb->query("DELETE FROM ".$prefix."cb_tags2cats"); 
    } 

?>

出典

2012-02-18 ChrisBuck

てみ加える復帰はfalse;あなたのAjaxコールの後。 – akiller

あなたはどちらかreturn falseまたはpreventDefault()を使用する必要がある、と述べました。また、とfadeInにコールをsuccessコールバックに移動する必要があります。そうでないと何らかの理由でリクエストがうまくいかなかった場合、ユーザーはがであると誤解される可能性があります。、（親またはトップ）現在のページをリロードせずに別のPHPページにデータを投稿する非表示のiframeを作成し、提出するターゲットとしてそれを使用する

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('tr.assoc_row').show(); 
     $('#settings-removed-msg').hide(); 

     $('#form-delete-assoc').submit(function(e){ 

      // prevent the form from submitting normally 
      e.preventDefault(); 

      $.ajax ({ 
       type: 'POST', 
       url: '/delete-assoc.php', // Relative paths work fine 
       data: { removeall: 'delete-all' }, 
       success: function(){ 
        $('tr.assoc_row').fadeOut('slow'); 
        $('#settings-removed-msg').fadeIn('slow'); 
       } 
      }); 

     }); 
    }); 
</script>

出典

2012-02-18 00:51:58 Steve

ありがとう！私はそれをします。 JQueryをプラグインの早い時期に明示してもらえないかと思います。スクリプトがフォームの前にあるので、$ _POST ['form-delete-assoc']に何も渡していない可能性があります。また、Wordpressでのポストアクションの完全なURLを使用する必要があるかどうか、またはdelete-assoc.phpが同じフォルダにあると想定するかどうかについて、あなたは考えていますか？再度、感謝します。 – ChrisBuck

ありがとうSteve。相対パスであなたのコメントを見ました。 – ChrisBuck

'submit'を使っているなら、スクリプトはフォームがレンダリングされた後に来なければなりません。しかし、 '.on（ 'click' '＃form-delete-assoc'、function（）{}）'を使うと、（フォームがレンダリングされる前または後で）どこからスクリプトが呼び出されても問題ありません：http ：//api.jquery.com/on/ – Steve

フォームイベントNEを提出edsがfalseを返して、実際にフォームを送信しないようにします。他の人のように

$('#form-delete-assoc').submit(function(){ 
    ... rest of your code here... 

    return false; 
}

出典

2012-02-18 00:34:02

最初の問題が修正されました。ありがとうございました！他の唯一の問題は、PHPファイル内の$ _POST変数が設定されていないことです。私はそれをフォームID（つまり、（isset（$ _ POST ['form-delete-assoc']）））と入力IDに結びつけようとしました（つまり、if（isset（$ _ POST ['form-delete-assoc ']））））、どちらも動作しません。 $ _POST変数を設定するためにajaxを使用して実際にphpに設定されているかどうかをチェックする間に、情報は送信されません。 – ChrisBuck

JQueryは自動的にフォームデータをajaxリクエストに入れません。 ajax呼び出しに送られた 'data'値にそれを追加することで、あなた自身で手動で行う必要があります。 –

したがって、スクリプトは、ajax呼び出しがラベル 'removeall'と値 'yes'を使用して手動でデータを設定することを示しています。しかし、isset（$ _POST ['removeall']）でトリガされるPHPコードは実行されません： 'if（isset（$ _POST ['removeall']））{ $ wpdb-> query（" DELETE FROM "。 $プレフィックス "cb_tags2cats"）; } ' – ChrisBuck

。このタイプのソリューションでは、jsonレスポンスのポストおよび取得が可能です。このスニペットはファイルをPHPページにアップロードします。

<script type="text/javascript"> 
function init() { 
    document.getElementById('file_upload_form').onsubmit=function() { 
     document.getElementById('file_upload_form').target = 'upload_target'; //'upload_target' is the name of the iframe 
    } 
} 
window.onload=init; 
</script> 
</head><body> 
<form id="file_upload_form" method="post" enctype="multipart/form-data" action="upload.php"> 
<input name="file" id="file" size="27" type="file" /><br /> 
<input type="submit" name="action" value="Upload" /><br /> 
<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe> 
</form>

このチュートリアルでは、ステップでの処理工程を説明する - > http://www.openjs.com/articles/ajax/ajax_file_upload/

応答を解析する方法についてフォローアップ - > http://www.openjs.com/articles/ajax/ajax_file_upload/response_data.php

出典

2012-02-22 22:36:23

WordpressでページをリロードせずにJQueryとAJAXに投稿する

答えて

関連する問題