插件管理頁面中的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

正如你所說的地址也改變了一下，這是否意味着頁面重載之前和阿賈克斯事件。所以你需要防止默認提交事件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); 
     } 
    }); 

});