在表单提交时从AJAX发送变量

时间：2018-05-04 作者：Ante Medic

我想用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 表单中的行，然后简单地重新加载页面。

如果有人能告诉我我做错了什么，我将以此为基础，从表单中实际发送复选框值，并在函数中执行查询以过滤数据。

1 个回复

最合适的回答,由SO网友:Mancius Mancius 整理而成

在html表单中添加<input name="action" type="hidden" value="test_function"/> . 这里的“value”是您的“action\\u name”。您的ajax调用不正确。数据应为url: "your php action script" data: $(\'form#filter).serialize(), 关于ajax首先尝试在没有wordpress的情况下在计算机上创建ajax。如果您了解ajax的工作原理，请尝试使用Wordpress。如果要保持在同一页上，请使用jQuery(document).ready(function($) { $(\'form#filter\').on("submit",function(e){ e.preventDefault(); $.ajax({ .....初学者不理解ajax是什么。这是服务器响应。所以，首先需要服务器端脚本（使用php）在url中写入它所在的位置，然后在该url文件中发送数据。然后执行，服务器做出响应。

/更新好，我将给出一个正确的wordpress ajax示例，并尝试解释它是如何工作的。

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"> 否则它需要工作。

Javascript

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!";

?>

重要的是要理解：如果在javascript警报框中只看到“服务器说：”则脚本失败。若你们在警告框中看到“服务器说：我骗了你们”，那个么这是正确的。

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文件管理ajax。带有myPlugin/serverSidePHPscript的php。php然后你会看到它几乎是一样的。

/*更新*/和aproach 3是最简单的方法。在插件中，不要使用钩子wp\\u ajax\\u callback\\u function或wp\\u ajax\\u nopriv\\u callback\\u函数钩子，而要使用admin\\u init钩子作为前端。wp\\u ajax钩子永远不会触发，因为admin ajax中存在if条件。php文件。

这就是ajax在wordpress上的工作方式。

结束

小码农CODE

在表单提交时从AJAX发送变量

相关推荐

How to use wp-ajax in wp-cron