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

Question

我正在本地主机上制作一个 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);
}
});
});
});

Answer 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);
        }
    });

});