Ajax/Jquery в рамке Zend

Question

Я использую фреймворк Zend (php), и я пытаюсь отправить a из ajax/jquery.

Вот .phtml:

<form id="find"> 
    <input type="text" name="name"> 
    <input type="submit" id="submit" value="Submit"> 
</form> 

Вот Аякса/JQuery часть:

$(document).ready(function() { 
    $("#submit").click(function(){ 
     $.ajax({ 
      type:'POST', 
      url: "<?php echo SITE_URL;?>Training/test", 
      data:$('#find').val(), 
      success: function(response) { 
       alert (response); 
      } 
     }); 
    }); 
}); 

Здесь, «Обучение» является контроллером и «тест» это действие внутри контроллера. Действие имеет только 1 строку кода, которая является эхом «привет». После того, как пользователь набирает номер в поле и нажимает кнопку «отправить», элемент управления должен перейти к контроллеру, отображая «привет» на успех. Однако ничего не происходит, когда я нажимаю на него. Пожалуйста, помогите мне. Заранее спасибо.

Answer 1

** EDIT: поле Просто отметил, что в вашем HTML, вы не дали атрибут ID на «найти» , Поэтому $ ('# find'). Val() даст вам ошибку, что-то вроде «не может найти метод val() неопределенного. Добавьте к нему id = find tag и он должен работать.

** Другое Редактирование: Извините за путаницу. Ваша форма имеет id = find, но то, что вы хотите отправить на сервер (я считаю), - это значение полей. Поэтому дайте ID-имя для ввода, затем используйте:

var data = {find: $('#name').val()}; 

.

Вы должны начать с помощью консоли, чтобы увидеть, если событие срабатывает что-то вроде:

<script> 
$(document).ready(function() { 
    $("#submit").click(function(e){ 
     e.preventDefault ? e.preventDefault() : e.returnValue = false; //This will prevent the regular submit 
     console.log('Hello'); 
    }); 
}); 
</script> 

(Вы используете пихты e ошибка или инструменты Chrome dev, правильно)? Если нет, посмотрите на конец этого сообщения. Если вы видите Hello на своей консоли, вы на правильном пути. Затем попытайтесь установить свой адрес в переменной и попытаться проверить его в консоли:

<script> 
var url = "<?php echo SITE_URL;?>Training/test"; 
$(document).ready(function() { 
    $("#submit").click(function(e){ 
     e.preventDefault ? e.preventDefault() : e.returnValue = false; //This will prevent the regular submit 
     console.log(url); 
    }); 
}); 
</script> 

Тогда вы должны увидеть URL в консоли, это означает, что вы еще делаете хорошо.

Если это работает, попробуйте установить данные и проверить выход таким же образом:

<script> 
var url = "<?php echo SITE_URL;?>Training/test"; 
var data = { 
    find: $('#find').val() 
}; 
$(document).ready(function() { 
    $("#submit").click(function(e){ 
     e.preventDefault ? e.preventDefault() : e.returnValue = false; //This will prevent the regular submit 
     console.log(data); 
    }); 
}); 
</script> 

Надеясь все еще работает (вы видели, данные), а затем попробовать фактический полный код и посмотреть, если вы есть ошибка или что-то в этом роде. Кроме того, обязательно включите функцию ошибки в ваш вызов ajax, чтобы вы получили ответ, если что-то пошло не так на сервере.

<script> 
var url = "<?php echo SITE_URL;?>Training/test"; 
$(document).ready(function() { 
    $("#submit").click(function(e){ 
     e.preventDefault ? e.preventDefault() : e.returnValue = false; //This will prevent the regular submit 
     var url = "<?php echo SITE_URL;?>Training/test"; 
     var data = { 
      find: $('#find').val() 
     }; 
     $.ajax({ 
      type:'POST', 
      url: url, 
      data: data, 
      success: function(response) { 
       alert (response); 
      }, 
      error: function(resp) { 
       alert(resp.responseText); 
      } 
     }); 
    }); 
}); 
</script> 

Некоторые инструменты, чтобы помочь вам:

Если вы используете FireFox, использовать FireBug для отладки: https://addons.mozilla.org/fr/firefox/addon/firebug/

Если вы используете Chrome (мой личный фаворит), узнать немного больше о Chrome Средства для разработчиков: https://developers.google.com/chrome-developer-tools/?hl=fr

Если вы используете IE, пожалуйста, переключитесь на что-то еще для целей разработки, а затем попробуйте в IE, чтобы убедиться, что код совместим (скорее всего, это будет не так, но будет проще чтобы узнать, почему он не работает после этого).

Что касается линии e.preventDefault ......, посмотрите на этот SO опубликовать для получения более подробной информации: https://stackoverflow.com/a/15913969/1483513

Надеется, что это помогает!

Answer 2

Вы не назвали Parametr в Ajax называют

data:$('#find').val(), 

изменить его

data:{'param': $('#find').val()}, 

О Zend это не имеет значения, если это Зенд или нет. Вы можете обрабатывать запрос, просто предоставляя правильный URL-адрес. Вы можете получить доступ к значению param в Zend по методу $this->getParam('param').

Также вы не предотвращаете действие отправки по умолчанию. Измените функцию:

$("#submit").click(function(ev){ 
      ev.preventDefault(); 

или использовать в конце функции return false;

Answer 3

1. Я не тестировал ваш jQuery. Но учтите, что вам требуется инструкция event.preventDefault, чтобы убедиться, что у вас нет нормального представления формы.

2. Основная проблема заключается в вашем контроллере zend, потому что вам нужен специальный ответ . Я полагаю, у вас есть контроллер для выполнения логики запросов. Я назову это AjaxController, и я назову действие ajaxrecuestAction, чтобы проиллюстрировать, как отправить правильный ответ.

   <?php 
   // Filename: yourProject/module/ModuleName/src/Controller/AjaxController.php 
   namespace ModuleName\Controller; 
   
   use Zend\Mvc\Controller\AbstractActionController; 
   use Zend\View\Model\ViewModel; 
   
   class AjaxController extends AbstractActionController { 
   public function ajaxrecuestAction(){ 
       // This function is called by zend to procces your ayax request 
       // you must test if it's an xmlHttpRequest 
       $request = $this->getRequest(); 
       $is_xmlHttpRequest = ($request->isXmlHttpRequest()) ? 1 : 0; 
       if(!$is_xmlHttpRequest){ 
       // If not you must return a normal page, a message page 
       // perhaps a forgiven message page, etc. It depends on your site 
       // logics 
       }else{ 
       // The solution's KEY 
       // You must disable the zend's normal output 
       $viewmodel = new ViewModel(); 
       $viewmodel->setTerminal($is_xmlhttprequest); 
       // Proccess the input and prepare your output 
       $output = CallTheLogicsToPrepareIt($request->getContent()); 
       // send your response 
       $response = $this->getResponse(); 
       $response->setContent($output); 
       return $response; 
       } 
   }