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},

回声表单使用AJAX提交给div

2 个答案: