使用 AJAX 将 Echo 表单提交给 div

Question

好的，我不是 AJAX 专家，所以请听我说...

我正在尝试使用表单提交、AJAX 和 PHP 将一些数据回显到 div。我希望这是可能的。我环顾 stackoverflow 和 google 寻找答案，但找不到适合我的目的。

这是我的 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 而不是类。

看，可能是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},