Question

我有一个表单，当提交时，重新加载页面并创建一个名为#message的div并显示在正文中。我试图ajaxify我的形式，但我坚持如何让消息现在显示没有重新加载。以下是我的代码。

$(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
   }); 
 });
});

Answer 1

我可能会误解你真正想要存档的内容，但我希望就是这样。对不起，如果不是。

当我想在不重新加载的情况下显示新内容时，我正在使用<option value=""> - </option>函数，该函数使子项成为所选元素。

例如，如果我使用.append()调用数据库并想要在div中显示结果，请使用jquery选择div并将结果附加到success函数中的div。

ajax()

这将构成一个＆＃34; p-element＆＃34;这是div的孩子。它会显示没有重新加载有关$('#div').append('<p>Info here</p>')的更多信息，请访问：http://api.jquery.com/append/

在ajax表单提交后显示div结果

2 个答案: