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代码

Error: Your Xcode (8.3.3) is too outdated.

请注意，我已将$(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; }); });替换为$(document).on('click', '.subscribe_newsletter', function()，并在下面的行中添加了$('.subscribe_newsletter').click(function(e)

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>

如何通过AJAX创建php echo

3 个答案: