web-dev-qa-db-ja.com

フォーム送信時にajaxから変数を送信する

私はチェックボックスでフィルタをAjaxで作りたいです。

これがチェックボックス付きのフォームです。

<form  method="post" id="filter">
    <input type="checkbox" name="f" value="1" onchange="this.form.submit()" <?php if  ($face =='1') {echo 'checked';}?>
    <input type="checkbox" name="t" value="1" onchange="this.form.submit()" <?php if ($Twitter=='1') {echo 'checked';}?>    
    <input type="hidden" value="myfilter"> 
</form>

これがjavascriptです。

jQuery(document).ready( function(){  
    jQuery('#content').on('submit', '#filter', function(e) {
    e.preventDefault();     
    var test = jQuery('#test-btn').data( 'id' );

    jQuery.ajax({           
        url : rml_obj.ajax_url,
        type : 'post',
        data : {
            action : 'test_function',
            security : rml_obj.check_nonce,
            test_data : test
        },
        success : function( response ) {
            alert (test);               
            jQuery('#result').html(response);

        }
    }); 
    });
 });

そして機能：

function test_function() {  
check_ajax_referer( 'rml-nonce', 'security' );  
$test_data = $_POST['test_data'];
echo $test_data; 
die();
}
add_action('wp_ajax_test_function', 'test_function'); 
add_action('wp_ajax_nopriv_test_function', 'test_function');

今のところ私はただそれをテストしようとしています。そのため、ユーザーがチェックボックスをクリックしたときにajaxが呼び出されます。しかし、私は立ち往生しています。この行をフォームアクションaction="<?php echo site_url() ?>/wp-admin/admin-ajax.php"に追加すると、送信時にajax url：admin-ajax.phpに行き詰まります。フォームからaction行を削除すると、ページの単純なリロードが行われます。

誰かが私が何をしているのか私に言うことができるならば、私はこれを構築して、実際にフォームからチェックボックス値を送り、データをフィルタするための機能でクエリを実行します。

ajaxforms
1
Ante Medic

あなたのHTMLフォームに<input name="action" type="hidden" value="test_function"/>を追加してください。ここで "value"はあなたの "action_name"です。あなたのAjax呼び出しは正直ではありません。データはurl: "your php action script" data: $('form#filter).serialize(),であるべきですajaxについてまず最初にワードプレスなしであなたのコンピュータ上でajaxを作成しようとします。 AjaxがWordpressでどのように機能するかを理解したら。同じページに留まりたい場合はjQuery(document).ready(function($) { $('form#filter').on("submit",function(e){ e.preventDefault(); $.ajax({ .....を使いましょう。初心者はajaxが何であるか理解できません。それはサーバーの応答です。そのため、まずサーバーサイドスクリプト（phpを使用）をその場所にURLで記述し、次にデータをそのURLファイルに送信する必要があります。それから実行され、サーバーは応答します。

/ update /正しいwordpressのajax axampleを提供し、それがどのように機能するかを説明します。

html

<form  method="post" id="filter">
<input type="checkbox" name="f" value="1" onchange="this.form.submit()" <?php if  ($face =='1') {echo 'checked';}?>
<input type="checkbox" name="t" value="1" onchange="this.form.submit()" <?php if ($Twitter=='1') {echo 'checked';}?>    
<input type="hidden" name="action" value="my_php_action">

これは重要な<input type="hidden" name="action" value="my_php_action">で、それ以外には作業が必要です。

ジャバスクリプト

jQuery(document).ready( function(){  
    $('#filter').on('submit', function(e) {
    e.preventDefault();     
     jQuery.ajax({
  /*here url is in your plugin directory created file to which you sent data*/   
        url : myPlugin/serverSidePHPscript.php, 
        type : 'post',
       /* data : {
            action : 'test_function',
            security : rml_obj.check_nonce,
            test_data : test
        }, incorrect. Should be folowing*/
        data:$('form#filter').serialize(), //server will unserialize automatic
        success : function( response ) {
        alert ('Server say :' + response ); //!important for url debuging purpose   
        }
    }); 
    });
 });

myPlugin/serverSidePHPscript.phpファイルは、バリエーション1のようになっています。

<?php 

echo "I fooled you!";

?>

enter image description here 

理解しておくことが重要です：もしJavaScriptアラートボックスに "Server say："としか表示されなければスクリプトは失敗しています。警告ボックスに「Server say：だまされました」と表示されている場合はそれが正しいです。

myPlugin/serverSidePHPscript.phpファイルは、バリエーション2のようになっています。

<?php
/**
 * Executing Ajax process.
 *
 * @since 2.1.0
 */
define( 'DOING_AJAX', true );
if ( ! defined( 'WP_ADMIN' ) ) {
    define( 'WP_ADMIN', true );
}

/** Load WordPress Bootstrap */
require_once('../../../../wp-load.php' );

/** Allow for cross-domain requests (from the front end). */
//send_Origin_headers();

// Require an action parameter here is for debuging
if ( empty( $_REQUEST['action'] ) )
    wp_die( '0', 400 );

/** Load Ajax Handlers for WordPress Core */
require_once( ABSPATH . 'wp-admin/includes/ajax-actions.php' );

@header( 'Content-Type: text/html; charset=' . get_option( 'blog_charset' ) );
@header( 'X-Robots-Tag: noindex' );

send_nosniff_header();
nocache_headers();

add_action('I_fooled_you_again_wp_ajax', 'callback_function');
do_action( 'I_fooled_you_again_wp_ajax');


//callback function
function callback_function(){
  echo "I fooled you again!";
}
wp_die();


?>

警告ボックスに「サーバーが言っている：私はまたまたあなたをだました！」と表示されたらそれからスクリプトは正しいです。 WordPressのファイルadmin-ajax.phpとmyPlugin/serverSidePHPscript.phpを比較すると、ほぼ同じです。

/ * update * /そして3番目の方法が最も簡単です。プラグインでは、wp_ajax_callback_fuctionまたはwp_ajax_nopriv_callback_functionフックを代わりに使用しないでください。フロントエンドにもadmin_initフックを使用してください。 admin-ajax.phpファイルにif条件があるため、wp_ajaxフックは起動しません。

これがAjaxがWordPressでどのように機能するかです。

0
Mancius Mancius