在Ajax表單提交後顯示DIV結果

我有一個表單，當被提交時，頁面被重新加載，一個名爲#message的div被創建並顯示在主體中。我試圖ajaxify我的表單，但我堅持如何讓信息現在顯示而無需重新加載。以下是我的代碼如下。在Ajax表單提交後顯示DIV結果

$(document).ready(function(){ 
    $('input#submit').on('click', function() { 
    $('#form').submit(function() { 
     $.ajax({ // create an AJAX call... 
     data: $(this).serialize(), // get the form data 
     type: $(this).attr('method'), // GET or POST 
     url: $(this).attr('action'), // the file to call 
     success: function(response) { // on success.. 
     alert($('div#message').text()); // Alert the message text..fails 
     } 
     }); 
     return false; // cancel original event to prevent form submitting 
    }); 
}); 
}); 

<form action="settings.php" method="post" class="standard-form" id="form"> 
     <input type="text" name="email" id="email" value=""> 
     <input type="password" name="pass" id="pass" size="16" value="" class="password-entry" /> 
     <input type="submit" name="submit" value="<?php _e('Update'); ?>" id="submit" class="small button"/> 
</form>

更新：這是我想要的新功能，但是所有被警告是「[對象] [對象]」，並沒有實際的文本。我不確定這意味着什麼。

$(document).ready(function(){ 
    $('input#submit').on('click', function() { 
    $('#form').submit(function() { 
     $.ajax({ // create an AJAX call... 
     data: $(this).serialize(), // get the form data 
     type: $(this).attr('method'), // GET or POST 
     url: $(this).attr('action'), // the file to call 
     success: function(data) { // on success.. 
     alert($('div#message').text(data)); 
     } 
     }); 
     return false; // cancel original event to prevent form submitting 
    }); 
}); 
});

來源

2016-08-27 LearntoExcel

是什麼在你成功的功能「響應」的內容？另外，嘗試使用e.preventDefault（）來防止默認表單提交。在$（「＃form」）提交函數中。 – kinduff

這個html是什麼樣的？並幫助調試：現在刪除您的ajax電話。確保你阻止了默認的表單提交。當你不用重定向就可以點擊提交按鈕時，你可以添加你的ajax請求。 – Jasen

@Jasen我不確定你是否在考慮他們是否有重定向問題。沒有，所以我很抱歉，如果不明確。表單不重定向。提交後，我提醒表單提交後，通常會出現的div的內容，而不是ajax – LearntoExcel

$("form").on('submit', function(event) { 
    event.preventDefault(); // to prevent default page reloading 
    var dataString = $(this).serialize(); // to get the form data 

    $.ajax({ 
     type: "POST", 
     url: "post_process.php", 
     data: dataString, 
     success: function(data){ 
      $('form')[0].reset(); // to reset form data 
     } 
    }).done(function(data){ 
     alert(data); // This will be called after the ajax executed 
    }); 

});

來源

2016-08-27 21:04:03 Naresh

我試過這個，得到提醒的是「[Object] [object]」。不是信息應該是什麼。不確定那是什麼意思。 – LearntoExcel

@LearntoExcel請你更新你的HTML，以便我可以給你更合適的答案。 – Naresh

我已經更新了格式html @ e-Designary – LearntoExcel

我本來可能誤解了你真正想要歸檔的內容，但我希望是這樣。對不起，如果不是。

當我想要顯示新的東西而不重新加載時，我正在使用.append()函數，該函數將子元素添加到所選元素。

例如，如果我調用一個數據庫ajax()，並希望顯示在div中的結果我選擇div與jquery和追加結果到div在成功函數。

$('#div').append('<p>Info here</p>')

這將使一個「p元素」，這是一個孩子的div。而且它會顯示不重裝更多.append()這裏：http://api.jquery.com/append/

來源

2016-08-27 20:57:42

我認爲它缺少附加響應：'成功：功能（響應）{警報（$（'div＃message'）.text（response））; }' – kinduff

是的，我認爲你是對的。 –

是的，我熟悉append。問題是直到表單提交後才創建div，我試圖在ajax調用後顯示它。 @kinduff – LearntoExcel

在Ajax表單提交後顯示DIV結果

回答

相關問題