Zend框架中的Ajax/Jquery

Question

我正在使用Zend框架（PHP），我試圖提交使用ajax/jquery。

這裏是一個.phtml：

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

這裏的AJAX/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行代碼是回聲「你好」。在用戶在方框中輸入一個數字並點擊「提交」後，控制器必須去控制器，從而在成功時顯示「hello」。但是，當我點擊它時沒有任何反應。請幫幫我。提前致謝。

Answer 1

**編輯結束使用：只需注意的是，在你的HTML，你沒有給一個ID屬性爲「發現」場。因此，$（'＃find'）。val（）會給你一個錯誤，類似於「找不到未定義的方法val（）」，添加id = find標籤到你的應用程序中。編輯：對於混淆抱歉，你的表單有id = find，但你想發送到服務器（我相信）是字段的值，所以給你的輸入一個ID = name然後用：

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開發工具，對）？如果沒有，看看這篇文章的結尾。 如果您可以在控制檯中看到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> 

那麼你應該在控制檯中看到的網址，這意味着你仍然做得很好。

如果這樣的作品，嘗試設置數據，並檢查以同樣的方式輸出：

<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中嘗試它，以確保您的代碼是兼容的（很可能不會但它會更容易鰭d爲什麼它以後不起作用）。

至於行e.preventDefault ......，看看這個SO發佈更多細節：https://stackoverflow.com/a/15913969/1483513

希望這有助於！

Answer 2

你沒有名字parametr在Ajax調用

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

將其更改爲

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

關於Zend公司，如果它的Zend與否並不重要。您只需提供正確的URL即可處理請求。您可以通過$this->getParam('param')方法訪問Zend中的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; 
       } 
   }