回声表单使用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},