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”。 用戶在框中輸入數字並單擊“提交”后，控件必須轉到控制器，從而在成功時顯示“ hello”。 但是，當我單擊它時，什么也沒有發生。 請幫我。 提前致謝。

Answer 1

您沒有在Ajax調用中命名parametr

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

更改為

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

關於Zend，是否為zend無關緊要。 您只需提供正確的URL就可以處理請求。 您可以通過$this->getParam('param')方法訪問Zend中的param值。

另外，您也不會阻止默認的提交操作。 將功能更改為：

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

或在函數末尾使用return false;

Answer 2

1. 我沒有測試您的jQuery。 但是請注意，您需要使用event.preventDefault指令來確保您沒有執行正常的表單提交操作。

2. 主要問題出在zend Controller上，因為您需要特殊的響應。 我想您有一個控制器來執行請求邏輯。 我將其命名為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; } } 

Answer 3

**編輯：剛剛指出，在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>

（您確實使用Fire bug或Chrome開發工具，對嗎？）？ 如果沒有，請看這篇文章的結尾。 如果您可以在控制台中看到Hello，則說明您在正確的路徑上。 然后嘗試在變量中設置url並嘗試在控制台中檢查它：

<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

希望這可以幫助 ！