回聲表單使用AJAX提交給div

Question

好的，我不是AJAX專家所以請聽我說...

我正在嘗試使用表單提交，AJAX和PHP將一些數據回顯給div。 我希望這是可能的。 我查看了stackoverflow和谷歌的答案，但找不到我的目的。

這是我的HTML：

<article id="search-results">
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <?php echo do_shortcode('[searchandfilter id="15"]');?>
            </div>
            <div class="col-sm-7">
                <?php echo do_shortcode('[searchandfilter id="15" show="results"]'); ?>
                <?php get_template_part('pagination'); ?>
            </div>
            <div class="col-sm-2">
                <div id="txtHint">
                    <h4>Saved Items</h4>
                    <!-- ECHO OUTPUT -->
                </div>    
            </div>
        </div>
    </div>
</article>

在div中， txtHint是我希望輸出回顯的地方。 這是我的表單代碼：

<form id="ajaxform" class="content-items">
  <div class="row">
    <div class="col-sm-3">
       <div class="thumbnail-content-items">
         <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
           <?php the_post_thumbnail(array(120,120)); // Declare pixel size you need inside the array ?>
           <?php endif; ?>
       </div>
     </div>
   <div class="col-sm-9">
     <h2><?php the_title(); ?></h2>
       <?php html5wp_excerpt('html5wp_index'); ?>

       <div class="text-right">
        <button type="submit" class="btn btn-primary text-right" data-toggle="modal" data-target=".post-<?php the_ID(); ?>" data-attribute="<?php the_title(); ?>" data-whatever="<?php the_title(); ?>">Save this item <span class="glyphicon glyphicon-heart" aria-hidden="true"></span></button>
      </div>
    </div>
  </div>

這是我的AJAX腳本：

$("#ajaxform").submit(function(){
   $.ajax({
      type: "POST",
      url: "example.com/reload.php",
      data: "id=" + a_href,
       success: function(data, textStatus) {
        $(".txtHint").html(data);    
        },
        error: function() {
            alert('Not OKay');
        }
   });

   return false;
});

這是在我的php文件中：

<?php echo hello; ?>

發生了一些事情，頁面被刷新，但這也可能是表單中的提交操作。 任何人都可以幫我解決這個問題嗎？

干杯

Answer 1

更改

$(".txtHint").html(data);

至

$("#txtHint").html(data);    

因為， txtHint是ID而不是Class。

看，可能是hello打印。 但是，由於頁面重新加載， <div id='txtHint'>無法顯示ajax response 。 所以，你必須使用event.preventDefault(); 用於停止頁面刷新。

按原樣使用給定的代碼。 我刪除了data因為你也不知道為什么在你從某個地方復制它時使用它。

$("#ajaxform").submit(function(event){
   event.preventDefault();
   $.ajax({
      type: "POST",
      url: "example.com/reload.php",
      success: function(data) {
        $("#txtHint").html(data);    
      },
      error: function() {
        alert('Not OKay');
      }
   });
   return false;
});

在這里，用引號打個hello 。

reload.php

<?php echo "hello"; ?>

Answer 2

用而不是

$("#ajaxform").submit(function(){

"id=" + a_href,

成

$("#ajaxform").submit(function(e){
e.preventDefault();

{id : a_href},