wp全站ajax插件,在WordPress中，如何从插件发送AJAX请求

在本教程中，展示如何在WordPress中创建自定义插件并发送AJAX请求。

1.表结构

创建employee表，我添加了一些记录，CREATE TABLE `employee` (

`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,

`emp_name` varchar(80) NOT NULL,

`salary` varchar(20) NOT NULL,

`gender` varchar(10) NOT NULL,

`city` varchar(80) NOT NULL,

`email` varchar(80) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

我使用这个表从AJAX请求获取和搜索记录。

2.创建目录和文件

首先，创建一个新插件。

在wp-content/plugins/目录中创建一个新目录，我将目录名称命名为pluginajax。

在这个目录中创建4个文件和一个文件夹-pluginajax.php-这是定义插件定义的主文件，也用于处理AJAX请求，

employeeList.php-使用此文件显示从AJAX请求中获取的记录。

script.js-此文件包含AJAX调用脚本。

style.css

img-这是存储插件图标的目录。

3. pluginajax.php

添加一个调用"插件AJAX"方法的菜单employeeList()，使用employeeList()方法包括employeeList.php文件。

使用wp_enqueue_style()和wp_enqueue_script()包含style.css和script.js文件。

使用wp_localize_script()方法将admin_url('admin-ajax.php')传递给script.js文件，

AJAX请求-

为了处理AJAX请求，我创建了两个方法-employeeList_callback()表获取所有记录，并以JSON格式返回记录，

searchEmployeeList_callback ()-读取$后['searchText']值，并使用它在emp_name 、email和city字段中搜索值，以JSON格式返回记录，

要从jQuery调用，需要向wp_ajax_[action-name]和wp_ajax_nopriv_[action-name]注册两个方法。

语法-add_action( 'wp_ajax_[action-name]', method-name );

add_action( 'wp_ajax_nopriv_[action-name]', method-name );

在示例中，我已经定义了employeeList和searchEmployeeList操作名。

完整的代码<?php

/*

Plugin Name: Plugin AJAX

Plugin URI: https://makitweb.com

description: A custom plugin to demonstrate call and handle AJAX request

Version: 1.0.0

Author: Yogesh Singh

Author URI: https://makitweb.com/about

*/

// Add menu

function pluginajax_menu() {

add_menu_page("Plugin AJAX","Plugin AJAX","manage_options","myplugin","employeeList",plugins_url('/pluginajax/img/icon.png'));

}

add_action("admin_menu","pluginajax_menu");

function employeeList(){

include"employeeList.php";

}

/* Include CSS and Script */

add_action('wp_enqueue_scripts','plugin_css_jsscripts');

function plugin_css_jsscripts() {

// CSS

wp_enqueue_style( 'style-css', plugins_url( '/style.css', __FILE__ ));

// JavaScript

wp_enqueue_script( 'script-js', plugins_url( '/script.js', __FILE__ ),array('jquery'));

// Pass ajax_url to script.js

wp_localize_script( 'script-js', 'plugin_ajax_object',

array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

}

/* AJAX request */

## Fetch all records

add_action( 'wp_ajax_employeeList', 'employeeList_callback' );

add_action( 'wp_ajax_nopriv_employeeList', 'employeeList_callback' );

function employeeList_callback() {

global $wpdb;

$response = array();

// Fetch all records

$response = $wpdb->get_results("SELECT * FROM employee");

echo json_encode($response);

wp_die();

}

## Search record

add_action( 'wp_ajax_searchEmployeeList', 'searchEmployeeList_callback' );

add_action( 'wp_ajax_nopriv_searchEmployeeList', 'searchEmployeeList_callback' );

function searchEmployeeList_callback() {

global $wpdb;

$request = $_POST['request'];

$response = array();

// Fetch record by id

$searchText = $_POST['searchText'];

$searchQuery ="";

if($searchText != ''){

$searchQuery =" and ( emp_name like '%".$searchText."%' or email like '%".$searchText."%' or city like '%".$searchText."%' )";

}

$response = $wpdb->get_results("SELECT * FROM employee WHERE 1".$searchQuery);

echo json_encode($response);

wp_die();

}

4. employeeList.php

完整的代码<?php

wp_head();

?>

S.noEmployee NameEmailSalaryGenderCity

wp_footer();

5. script.js

从ajax_url读取plugin_ajax_object.ajax_url，并在ajax_url变量中赋值。

完整的代码jQuery(document).ready(function($){

// AJAX url

var ajax_url = plugin_ajax_object.ajax_url;

// Fetch All records (AJAX request without parameter)

var data = {

'action': 'employeeList'

};

$.ajax({

url: ajax_url,

type: 'post',

data: data,

dataType: 'json',

success: function(response){

// Add new rows to table

createTableRows(response);

}

});

// Search record

$('#search').keyup(function(){

var searchText = $(this).val();

// Fetch filtered records (AJAX with parameter)

var data = {

'action': 'searchEmployeeList',

'searchText': searchText

};

$.ajax({

url: ajax_url,

type: 'post',

data: data,

dataType: 'json',

success: function(response){

// Add new rows to table

createTableRows(response);

}

});

});

// Add table rows by reading response object

function createTableRows(response){

$('#empTable tbody').empty();

var len = response.length;

var sno = 0;

for(var i=0; i

var id = response[i].id;

var emp_name = response[i].emp_name;

var email = response[i].email;

var salary = response[i].salary;

var gender = response[i].gender;

var city = response[i].city;

// Add

var tr ="

";

tr +="

"+ (++sno) +"";

tr +="

"+ emp_name +"";

tr +="

"+ email +"";

tr +="

"+ salary +"";

tr +="

"+ gender +"";

tr +="

"+ city +"";

tr +="

";

$("#empTable tbody").append(tr);

}

}

});