插件管理页面中的 Ajax 表单不起作用

Posted 2023-05-09

【中文标题】插件管理页面中的 Ajax 表单不起作用

【英文标题】：Ajax form in plugin admin page is not working

【发布时间】：2015-01-05 03:03:07

【问题描述】：

我正在本地主机上制作一个 wordpress 插件。我在插件的 custum 管理面板中添加了一个 ajax 表单。但表格不起作用。当我按下表单中的提交按钮（“添加”按钮）时，它显示一个空白页面，页面地址更改为

http://localhost/wp-admin/admin.php?eventname=myevent&Event+Date=2014-12-11

我在互联网上搜索了很多关于此的内容，但我没有找到可以解决此问题的解决方案。我认为问题在于 jquery 函数没有与表单的提交按钮链接。

我的插件代码是：

<?php
/* Plugin Name: Eventism
Plugin URI:
Description: Event Management System
Version: 1.0
Author: Ali Azlan
Author URI:
License: GPLv2 or later
*/

defined('ABSPATH') or die("No script kiddies please!");

//Include javascript library
wp_enqueue_script('eventism', plugins_url( '/script1.js' , __FILE__ ) , array( 'jquery' ));
// including ajax script in the plugin Myajax.ajaxurl
wp_localize_script( 'eventism', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php')));

wp_register_script( "eventism", plugins_url( '/script1.js' , __FILE__ ), array('jquery') );
wp_enqueue_script( 'jquery' );

function eventism_activation() 
eventism_install();

register_activation_hook(__FILE__, 'eventism_activation');

function eventism_deactivation() 

register_deactivation_hook(__FILE__, 'eventism_deactivation');

function eventism_install () 
global $wpdb;

/*
* We'll set the default character set and collation for this table.
* If we don't do this, some characters could end up being converted
* to just ?'s when saved in our table.
*/

$charset_collate = '';

if ( ! empty( $wpdb->charset ) ) 
$charset_collate = "DEFAULT CHARACTER SET $wpdb->charset";


if ( ! empty( $wpdb->collate ) ) 
$charset_collate .= " COLLATE $wpdb->collate";


$sql1 = "CREATE TABLE eventism_users (
id mediumint(9) NOT NULL AUTO_INCREMENT,
name varchar(30) DEFAULT '' NOT NULL,
cell varchar(13) DEFAULT '' NOT NULL,
eventcode varchar(10) DEFAULT '' NOT NULL,
cnic varchar(13) DEFAULT '',
email varchar(30) DEFAULT '',
confirm VARCHAR(2) DEFAULT 'n' NOT NULL,
time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
UNIQUE KEY id (id),
UNIQUE INDEX id_UNIQUE (id ASC)
) $charset_collate;";

$sql2 = "CREATE TABLE eventism_events (
id mediumint(9) NOT NULL AUTO_INCREMENT,
event varchar(10) DEFAULT '' NOT NULL,
event_date varchar(30) DEFAULT '' NOT NULL,
create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
UNIQUE KEY id (id),
UNIQUE INDEX id_UNIQUE (id ASC)
) $charset_collate;";

require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
dbDelta( $sql1 );
dbDelta( $sql2 );

$wpdb->insert(
$table_name='eventism_events',
array(
'event' => 'swaik1',
'event_date' => '10 december 2014',
)
);



add_action( 'admin_menu', 'eventism_menu' );

function eventism_menu() 
add_menu_page( 'Eventism', 'Eventism', 'manage_options', 'eventism_menu');
add_submenu_page( 'eventism_menu', 'Eventism', 'Eventism', 'manage_options', 'eventism_menu', 'eventism_options_events' );


function eventism_options_events() 
if ( !current_user_can( 'manage_options' ) ) 
wp_die( __( 'You do not have sufficient permissions to access this page.' ) );

echo '<div class="wrap">';
echo '<h1><b>Eventism</b></h1><sub><i> by Azlan</i><hr>
';

echo '<h1>Add new Event</h1>';

echo '
<form type="post" id="newevent" action="">
<b>Event Name: </b>
<input type="text" name="eventname" id="eventname">
<b>Event Date: </b>
<input type="date" name="Event Date" id="eventdate" placeholder="yyyy-mm-dd">
<input type="submit" value="Add" id="add1">
</form>

<div id="feedback"></div><hr>
';
echo '
<h1>Customer Database</h1>

';


function addevent()

global $wpdb;

$name = $_POST['eventname'];
// $date = $_POST['eventdate'];
$date = "meridate";

if($wpdb->insert('eventism_events',array(
'event'=>$name,
'event_date'=>$date,
))==FALSE)

echo "Error";


else 
echo "Event Added Successfully!";


die();


add_action('wp_ajax_addevent', 'addevent');
add_action('wp_ajax_nopriv_addevent', 'addevent');

?>

而我的 jquery 文件（script1.js）代码是：

jQuery(document).ready(function()
jQuery("#add1").click(function()
var eventname = jQuery("#eventname").val();
var eventdate = jQuery("#eventdate").val();
jQuery.ajax(
type: 'POST',
url: MyAjax.ajaxurl,
data: "action": "addevent", "eventname":eventname,
success: function(data)
alert(data);

);
);
);

【参考方案1】：

正如您所说，点击时地址也发生了变化，这意味着页面重新加载之前和 ajax 事件。所以你需要用event.preventDefault()来防止默认提交事件

jQuery("#add1").click(function(e)
    e.preventDefault();

    var eventname = jQuery("#eventname").val();
    var eventdate = jQuery("#eventdate").val();

    jQuery.ajax(
        type: 'POST',
        url: MyAjax.ajaxurl,
        data: "action": "addevent", "eventname":eventname, eventdate:eventdate,
        success: function(data)
            alert(data);
        
    );

);

【讨论】：

我对此进行了测试，@jogesh_pi 是正确的。只是缺少event.preventDefault()

@AliAzlan 非常欢迎您并很高兴为您提供帮助 :)

先生，我还有另一个问题.. 在 jquery 代码中，我的数据中只有“事件名称”。我应该怎么做才能将“eventdate”添加到它。

嗨，阿里，在您的代码中，您必须发送事件日期之类的事件名称，并且您必须从 php 代码中取消注释 $_POST[eventdate] 就是这样。

是的，我将从 php 代码中取消注释 $_POST[eventdate]。但我不知道如何在 jquery 中添加 eventdate 之类的 eventname ...我必须在 jquery 中为 eventdate 添加另一个函数，或者我可以将两个变量传递给 data 参数..？