Search query with Ajax

时间:2015-02-21 作者:Zeeshan

我正在运行一个$wpdb 选择查询并从文本框中获取其参数。结果显示只要我按下搜索按钮,但我想用Ajax做同样的事情,而不刷新页面。我什么都试过了,但页面仍在刷新。

jQuery代码:

jQuery(document).ready(function() {      
    jQuery("#Submityourskill").click(function(){       
        jQuery.post(yes.ajaxurl,{action : \'doit\'},
            function( response) {//start of funciton
                // alert(response);
                //jQuery("#searchtextbox").val(response);
                jQuery("#result").append(response);
                jQuery("#textarea").html(response);
                return false;
            } //end of function
        );
    }); // click button function finishing here
}); //end of main loop 
HTML:

<form action="" method="post">
    <div><input maxlength="200" name="secretcode" size="200" type="text" value="" placeholder="Type Here !" />
    <input id="Submityourskill" name="Submit" type="submit" value="Search Record" /></div>
</form>
<div id="result"></div>
PHP:

function doit() {
    if(isset($_POST[\'secretcode\'])!= \'\'){
        if($_POST[\'Submit\']) {
            $secretcode=$_POST[\'secretcode\'];
            global $wpdb;
            $sql = "SELECT * FROM wp_store_locator WHERE sl_description=\'$secretcode\'";
            $results = $wpdb->get_results($sql) or die(mysql_error());
            foreach( $results as $result ) {
                echo $result->sl_description;
            }
            exit();
        }
    }
}
add_action( \'wp_ajax_nopriv_doit\', \'doit\');
add_action( \'wp_ajax_doit\', \'doit\' );

function add_myjavascript(){  
    wp_register_script( \'globals\', get_stylesheet_directory_uri() . "/js/ajax-implementationn.js", array( \'jquery\' ) ); 
    wp_enqueue_script( \'globals\' );
    // use wp_localize_script to pass PHP variables into javascript
    wp_localize_script( \'globals\', \'yes\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) );
}  
add_action( \'init\', \'add_myjavascript\' );

1 个回复
SO网友:Milo

这是一个javascript问题。您必须阻止表单提交以阻止页面重新加载。看见event.preventDefault() 在jQuery文档中。

jQuery("#Submityourskill").click(function(event){
    event.preventDefault();
    // the rest of your code
});

结束

相关推荐

允许admin-ajax.php接收“application/json”而不是“x-www-form-urlencode”

我在用AngularJS的$http 函数将我的有效负载发送到WordPressadmin-ajax.php 子系统,但后者似乎只接受x-www-form-urlencoded 数据,而不是application/json 由Angular提供。我知道there are ways 使$http函数更像$.post(), 但这是荒谬的——既然已经是JSON,为什么还要将一堆JSON数据转换成一种形式呢?为此目的—is there any way of instructing admin-ajax to co