我建立了一个JS和PHP代碼来查詢資料庫並在頁面上顯示匹配的行.搞砸了wP上的其他頁面,所以我想知道如何定位單个頁面,這樣JS不会在其他頁面上執行。
JS:
jQuery(document).ready( function() {
console.log("Document loaded");
jQuery("#searchButton").click( function(e) {
console.log("Search button clicked");
e.preventDefault();
var zipCode = document.getElementById("inputField").value;
var data = {
'action' : "zip_code",
'zip_code' : zipCode
};
console.log("Zip code entered: " + data.zip_code);
console.log("WP AJax URL: " + data.action);
jQuery.ajax({
type : "post",
dataType : "json",
url : data.action,
data : data,
success: function(response) {
console.log(response.data);
if(response.success) {
console.log("response.type == success");
jQuery("#results").html(response.data.data);
}
else {
console.log("response.type == else");
console.log(response.data);
}
},
error: function(errorThrown){
console.log("In error, error thrown!");
console.log(errorThrown);
}
})
})
});
PHP:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action('wp_ajax_zip_search', 'zip_search');
add_action('wp_ajax_nopriv_zip_search', 'zip_search' );
function zip_search()
{
global $wpdb;
// Functional code omitted for now. Just need to get "here" paragraph return (for now)
$output = "<p>here</p>";
$response = array(
'data' => $output,
);
wp_send_json_success($response);
}
add_action( 'wp_enqueue_scripts', 'my_load_scripts' );
function my_load_scripts() {
// Enqueue javascript on the frontend.
wp_enqueue_script(
'zip_js',
get_template_directory_uri() . '-child-agent_search/js/zip_search.js',
array('jquery')
);
// The wp_localize_script allows us to output the ajax_url path for our script to use.
wp_localize_script(
'zip_js',
'myAjax',
array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) )
);
}
?>
最新回復
- 11月前1 #
相似問題
- wordpress:如何在wordPress中使用AJAX請求更改PHP變數wordpressphpwordpressthemedevelopmentwordpressajaxwordpressjquery2020-08-25 04:54
- wordpress:如何使用wp_ajax_set_post_thumbnail?wordpressphpwordpressajaxwordpressjavascriptwordpressjquerywordpresshtml2020-07-15 12:56
- wordpress:如何通過ajax和jquery更新資料wordpresswpquerywordpressajaxwordpressjquerywordpressmysql2021-01-02 06:55
- wordpress:从Php檔案到Ajax的响應未發送wordpresspluginswordpressphpwordpressajax2020-12-26 00:53
- wordpress:帶有admin-ajaxphp的AJAX POST請求的狀態400wordpressphpwordpresswoocommercewordpressajaxwordpressjavascript2020-11-28 12:55
在這裏,代碼對与
#searchButton
匹配的任何东西进行操作 元素:如果有
searchButton
在其他頁面上,它將与之匹配,因此您需要更加具體。例如,在主頁上,
<body>
標簽將有home
Class,這是我的網站首頁正文標簽:因此,要使其仅定位為首頁上的搜尋按钮,可以尝試執行以下操作:
或者,仅將JS排入该特定頁面,但是選擇器方法更好。