Вызовите ajax на интерфейсе

В моей папке плагина у меня есть два файла 1. hello-ajax.php 2. myajax.js

и по короткому коду я добавляю эту форму на frontend

<form id="theForm" method="post"> <input id="name" name="name" value = "name" type="text" /> <input name="action" type="hidden" value="the_ajax_hook" />&nbsp; <!-- this puts the action the_ajax_hook into the serialized form --> <input id="submit_button" value = "Click This" type="button" onClick="submit_me();" /> </form> <div id="response_area"> This is where we\'ll get the response </div> 

В файле плагина я добавил js-файл как:

 wp_enqueue_script( 'my-ajax-handle', plugin_dir_url( __FILE__ ) . 'myajax.js', array( 'jquery' ) ); wp_localize_script( 'my-ajax-handle', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); // THE AJAX ADD ACTIONS add_action( 'wp_ajax_the_ajax_hook', 'the_action_function' ); add_action( 'wp_ajax_nopriv_the_ajax_hook', 'the_action_function' ); // need this to serve non logged in users // THE FUNCTION function the_action_function(){ /* this area is very simple but being serverside it affords the possibility of retreiving data from the server and passing it back to the javascript function */ $name = $_POST['name']; echo"Hello World, " . $name;// this is passed back to the javascript function die();// wordpress may print out a spurious zero without this - can be particularly bad if using json } // ADD EG A FORM TO THE PAGE 

Таким образом, форма отображается на передней панели, но в консоли Uncaught ReferenceError: submit_me не задано

 submit_me() is defined in myajax.js file as: function submit_me(){ //alert(a); jQuery.post(the_ajax_script.ajaxurl, jQuery("#theForm").serialize() , function(response_from_the_action_function){ jQuery("#response_area").html(response_from_the_action_function); } ); } 

Но эта функция не работает, и насколько я знаю, есть какая-то проблема в вызове ajax, поэтому предложите мне, что я сделал не так, и как заставить ее работать.

Solutions Collecting From Web of "Вызовите ajax на интерфейсе"

Большая часть вашего кода выглядит хорошо для меня. Загружен ли ваш скрипт? (Подтвердите просмотр страницы). По предложению Мило, вот как правильно вставить сценарии вашего плагина:

 // Enqueue your scripts function load_my_scripts(){ wp_enqueue_script( 'my-ajax-handle', plugin_dir_url( __FILE__ ) . 'myajax.js', array( 'jquery' ) ); wp_localize_script( 'my-ajax-handle', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); } add_action( 'wp_enqueue_scripts', 'load_my_scripts' ); 

Я не знаю, вызывает ли это проблемы, но я бы, вероятно, переключился с использования вызова onclick и запускал ajax через форму submit. Переключение вашего JS-файла на следующее:

 jQuery(document).ready(function($){ $('#theForm').submit(function(e){ $.ajax({ data: jQuery("#theForm").serialize(), type: 'post', url: the_ajax_script.ajaxurl, success: function(response_from_the_action_function) { $("#response_area").html(response_from_the_action_function); } }); }); }); 

Просто нужно добавить

 e.preventDefault(); 

после $.ajax

Также необходимо удалить из формы:

 onClick="submit_me();"