donglao7947 2014-01-11 06:39
浏览 240

如何在wordpress的前端调用ajax

In my plugin folder I have two file 1. hello-ajax.php 2. myajax.js

and by shortcode I add this form on frontend

<form id="theForm" method="post">
    <input id="name" name="name" value = "name" type="text" />
    <input name="action" type="hidden" value="the_ajax_hook" />&nbsp; <!-- this puts the action the_ajax_hook into the serialized form -->
    <input id="submit_button" value = "Click This" type="button" onClick="submit_me();" />
</form>
<div id="response_area">
    This is where we\'ll get the response
</div>

In plugin file I added js file as:

wp_enqueue_script( 'my-ajax-handle', plugin_dir_url( __FILE__ ) . 'myajax.js', array( 'jquery' ) );
wp_localize_script( 'my-ajax-handle', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

// THE AJAX ADD ACTIONS
add_action( 'wp_ajax_the_ajax_hook', 'the_action_function' );
add_action( 'wp_ajax_nopriv_the_ajax_hook', 'the_action_function' ); // need this to serve non logged in users

// THE FUNCTION
function the_action_function(){
    /* this area is very simple but being serverside it affords the possibility of retreiving data from the server and passing it back to the javascript function */
    $name = $_POST['name'];
    echo"Hello World, " . $name;// this is passed back to the javascript function
    die();// wordpress may print out a spurious zero without this - can be particularly bad if using json
}
// ADD EG A FORM TO THE PAGE

So form is displaying at front end but in console Uncaught ReferenceError: submit_me is not defined

submit_me() is defined in myajax.js file as:

function submit_me(){
    //alert(a);
    jQuery.post(the_ajax_script.ajaxurl, jQuery("#theForm").serialize()
    ,
    function(response_from_the_action_function){
        jQuery("#response_area").html(response_from_the_action_function);
    }
    );
}

But this function is not working, and as far i know there is some problem in ajax call, so suggest me what did I wrong and how to make it work....Thanks

  • 写回答

2条回答 默认 最新

  • dpzzkfb1244 2014-01-11 11:44
    关注

    Make sure that function submit_me() isn't included into $(document).ready() handler. The function is not visible from the global scope and thus cannot be called from the onclick property.

    Also, the correct way to include scripts in wordpress is by hooking into wp_enqueue_scripts action:

    add_action('wp_enqueue_scripts', 'enqueue_your_scripts');
    function enqueue_your_scripts() {
        wp_enqueue_script( 'my-ajax-handle', plugin_dir_url( __FILE__ ) . 'myajax.js', array( 'jquery' ) );
        wp_localize_script( 'my-ajax-handle', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
    
    }
    
    评论

报告相同问题?

悬赏问题

  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥85 maple软件,solve求反函数,出现rootof怎么办?
  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题