wordpress搜索查询与ajax

Question

我正在wordpress中运行wpdb select查询，并从文本框中获取其参数。只要我按下搜索按钮，结果就会显示出来。但是我想在不刷新页面的情况下对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();
}
  }

下面是我使用过的其他php代码

PHP代码

add_action( 'wp_ajax_nopriv_doit', 'doit');
add_action( 'wp_ajax_doit', 'doit' );

下面是加入jQuery页面的代码

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' )

谢谢大家，并向…致意！

Answer 1

听一下表单的submit事件，让自己更轻松。除了单击“提交”按钮，还有其他提交表单的方法。

您正在寻找的是防止使用事件执行默认操作。preventDefault（）：

jQuery(document).ready(function() {  

    jQuery("#myform").submit(function(e){
        e.preventDefault();
        jQuery.post(yes.ajaxurl,{action : 'doit'}, function( response) {
            // alert(response);
            //jQuery("#searchtextbox").val(response);
            jQuery("#result").append(response);
            jQuery("#textarea").html(response);
            return false;
        });//end of function
    }); // submit form function finishing here
}); //end of main loop

并为您的表单提供一个id，以便您可以针对它：

<form id="myform" action="" method="post">