将链接替换为表单以将变量传递给javascript/ajax

时间:2014-06-03 作者:MikeiLL

我通过一个链接向javascript/ajax发送一个变量,但我想通过一个表单发送,这样我也可以传递用户输入。(这是一个插件,它与Echonest混音python脚本交互以创建音频编辑)。简短的问题是,我如何在WP ajax javascript中接收此内容:

<form id="receive_me" method="POST">
Username: <input type="text" name="user_variable">
<input type="hidden" name="generated_var" value="\'.$arguments.\'">
<input type="submit" value="Submit">
</form>
JS:

function glitch_player_display(generated_var) {
      jQuery.ajax({
        type: \'POST\',
        url: ajaxglitch_playerajax.ajaxurl,
        data: {
          action: \'ajaxglitch_player_ajaxhandler\',
          mix_name: mix_name
        },
        success: function(data, textStatus, XMLHttpRequest) {
          var showglitchplayer = \'#showglitchplayer\';
          jQuery(showglitchplayer).html(\'\');
          jQuery(showglitchplayer).append(data);
        },
        error: function(MLHttpRequest, textStatus, errorThrown) {
          alert(errorThrown);
        }
      });
    }
这是当前的PHP:

function glitch_player_show_make_mix(){
    $result = "";
    $generated_var = wp_create_nonce("ajaxloadpost_nonce");
    $arguments = "\'".$nonce."\'";
    $link = \' <div id="make_button"><a onclick="glitch_player_display(\'.$arguments.\');">\'. "Link Title" .\'</a></div>\';
    $result .= \'<h3>\' . $link . \'</h3>\';
    $result .=  \'<div id="showglitchplayer">\';
    $result .= \'</div>\';
    $result .= \'<div id="play_button"><a title="The Title" href="\'.plugin_URL.$generated_var.\'.mp3">First Mix</a></div>\';
    return $result;
}


add_action( \'wp_ajax_nopriv_ajaxglitch_player_ajaxhandler\', \'ajaxglitch_player_ajaxhandler\' );
add_action( \'wp_ajax_ajaxglitch_player_ajaxhandler\', \'ajaxglitch_player_ajaxhandler\' );

function ajaxglitch_player_ajaxhandler(){
    $generated_var = isset( $_POST[\'generated_var\'] )? $_POST[\'generated_var\'] : false;
    error_log( "The generated_var is $generated_var" ); // write it to the error_log too.)
但我不知道如何接收到javascript的帖子。沿着这些路线?

$(\'#inputForm\').submit(function glitch_player_display(mix_name)
我不需要第二个php脚本,是吗?如果能在正确的方向上进一步(或根本)提出一点,我将不胜感激。

谢谢,祝你身体健康。

答:根据下面的输入,以下是通过表单发送变量的一种方法:

<form id="form_id" name="form" method="post">
Field Title: <input type="text" id="user_input" size = 2>
<input type="hidden" id="mix_name" value="\'.$arguments.\'">
<input id="btn-submit" type="submit" onclick="glitch_player_display()" value="Submit">
</form>
这里是JS/jQuery

function glitch_player_display() {
        user_input = document.getElementById("user_input").value ? document.getElementById("user_input").value : 2;
        generated_var = document.getElementById("generated_var").value ? document.getElementById("generated_var").value : "Default_Var";
        $(document).on(\'submit\', \'#form_id\', function(event){
            event.preventDefault();
        });
        jQuery.ajax({ 
            beforeSend: function() {
                alert(generated_var + " in ajax user_input: " + user_input);
            },
            type: \'POST\',
            url: ajaxglitch_playerajax.ajaxurl,
            data: {
                action: \'ajaxglitch_player_ajaxhandler\',
                generated_var: generated_var,
                user_input: user_input
            },
            success: function(data, textStatus, XMLHttpRequest) {play_button
                var showglitchplayer = \'#showglitchplayer\';
                jQuery(showglitchplayer).html(\'\');
                jQuery(showglitchplayer).append(data);
            },
            error: function(MLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    }
注意,我们没有将变量发送到js函数glitch_player_display() 就像我们在第一个案例中一样。我们在JS函数中通过document.getElementById("user_input").value. 而且

beforeSend: function() {
                alert(generated_var + " in ajax user_input: " + user_input);
            },
只是一种测试方法,看看jQuery.ajax 函数实际正在接收。由于我们实际上不是通过提交按钮调用另一个脚本,因此有必要调用

$(document).on(\'submit\', \'#form_id\', function(event){
            event.preventDefault();
        });
那么jQuery(或JS?)不认为应该查找另一个脚本并生成错误,在这种情况下,错误会将user\\u变量替换为[对象对象]。可以使用查看对象console_log() 我认为这是一个巨大的错误对象。

1 个回复
SO网友:MikeiLL

根据以下输入计算出答案non WP-oriented forum 并在上面编辑以显示。

简而言之,这些变量是使用getElementByID 并防止了非操作窗体上的错误event.preventDefault();

像这样:

function glitch_player_display() {
        user_input = document.getElementById("user_input").value ? document.getElementById("user_input").value : 2;
        generated_var = document.getElementById("generated_var").value ? document.getElementById("generated_var").value : "Default_Var";
        $(document).on(\'submit\', \'#form_id\', function(event){
            event.preventDefault();
        });//etc...

结束

相关推荐

在WordPress导航菜单之前和之后插入一个javascript横幅代码

我正在尝试开发一个插件,在wordpress导航菜单前后插入javascript横幅代码,但我找不到任何解决此问题的方法。有人知道吗?我也不能附加到Div ID,因为每个wordpress主题都使用不同的Div ID和类作为导航菜单。谢谢编辑:横幅代码是adsense javascript代码。Wordpress有wp\\u nav\\u菜单功能,我想在wp\\u nav\\u菜单之前和之后注入javascript。