如何通過AJAX創建php echo

Question

我試圖通過AJAX以簡單的形式創建回顯，但是我沒有成功。

這是表格和js：

<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>

<script>
$(document).ready(function()
{   
    $(document).on('click', '.subscribe_newsletter', function()
    {       

        $('#subscribe_newsletter').val($(this).val());
            var data = $("#subscribe").serialize();

        $.ajax({

        type : 'POST',
        url  : 'email_subscribe.php',
        data : data,
        success :  function(data)
               {                        
                    $("#subscribe").fadeOut(500).hide(function()
                    {
                        $(".subscribe_wrapper").fadeIn(500).show(function()
                        {
                            $(".subscribe_wrapper").html(data);

                        });


                    });

               }
        });
        return false;
    });  

});
</script>
<div id="form" class="subscribe_wrapper">
   <form id="subscribe" method="POST">
      <input name="email_subscribe" type="text" />
      <input class="subscribe_newsletter" type="submit" name="submit" value="Subscribe">
   </form>
</div>

這是email_subscribe.php

// subscribe 
if (isset($_POST['email_subscribe'])) {   
   $email_add = $_POST['email_subscribe'] . ',' . "\n";
   $store = file_put_contents('database-email.txt', $email_add, FILE_APPEND | LOCK_EX);
   if($store === false) {
     die('There was an error writing to this file');
   }
   else {
     echo "$email_add successfully added!";
   }
}

回聲不會出現，電子郵件也不會存儲在文本文件中。 有人可以告訴我我在做什么錯嗎？

Answer 1

嘗試改變

$(document).on('click', '.subscribe_newsletter', function()

至

$(".subscribe_newsletter").click(function (e)

並添加

e.preventDefault();

Answer 2

以此替換您的Javascript代碼

$(document).ready(function()
{
    $('.subscribe_newsletter').click(function(e) {

      e.preventDefault();

        $('#subscribe_newsletter').val($(this).val());
            var data = $("#subscribe").serialize();

        $.ajax({

        type : 'POST',
        url  : 'email_subscribe.php',
        data : data,
        success :  function(data)
               {
                    $("#subscribe").fadeOut(500).hide(function()
                    {
                        $(".subscribe_wrapper").fadeIn(500).show(function()
                        {
                            $(".subscribe_wrapper").html(data);

                        });


                    });

               }
        });
        return false;
    });

});

請注意，我已經用$('.subscribe_newsletter').click(function(e)替換了$(document).on('click', '.subscribe_newsletter', function() ，並e.preventDefault();上添加了e.preventDefault();下面

Answer 3

嘗試以這種方式修改代碼：

<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>

<script>
$(document).ready(function()
{   
    $(document).on('click', '.subscribe_newsletter', function()
    {       
      var data =  $('#email_subscribe').val();
        $.ajax({
        type : 'POST',
        url  : 'email_subscribe.php',
        data : {email_subscribe: data},
        success :  function(data)
               {                        
                    $("#subscribe").fadeOut(500).hide(function()
                    {
                        $(".subscribe_wrapper").fadeIn(500).show(function()
                        {
                            $(".subscribe_wrapper").html(data);
                        });
                    });
               }
        });
        return false;
    });  
});
</script>
<div id="form" class="subscribe_wrapper">
   <form id="subscribe" method="POST">
      <input id="email_subscripe" name="email_subscribe" type="text" />
      <input class="subscribe_newsletter" type="submit" name="submit" value="Subscribe">
   </form>
</div>