页面重新加载在ajax

Question

我试图构建一个订阅表单。 的问题是，该页面被重定向，并且数据不会进入数据库， 页面被重定向到

http://localhost/xampp/MY/SUB_FOLDERS/includes/parse.php?subscriber=sid%40patel&subscribe=subscribe 

HTML代码

 <div id="subsc"> 
      <form class="navbar-form navbar-right" action="includes/parse.php" mathod="post"> 
       <div class="form-group"> 
       <input type="email" placeholder="Email" class="form-control" name="subs" id="subs" required="required"> 
       </div> 
       <input type="submit" class="btn btn-success" name="subscribe" id="subscribe" value="subscribe"> 
      </form> 
      </div> 

Ajax代码：

<script type="text/javascript"> 
$(document).ready(function(){ 

    $("#subscribe").click(function(){ 
    username=$("#subs").val(); 


     $.ajax({ 
      type: "POST", 
      url: "includes/parse.php", 
      //data:dataString, 
      success: function(html){ 

     if(html=='true') 
       { 
       $("#subsc").fadeOut("normal"); 

       $("#subsc").html("Thank you for subscriping!"); 

       } 
       else 
       { 
        $("#subsc").html("Error in subscribing"); 
       } 
      }, 

     }); 
     return false; 
    }); 
}); 
</script> 

用于将数据插入数据库的PHP脚本：

<?php include("connect.php"); 


if (@$_POST['subs']) { 
$subscriber = mysql_real_escape_string(strip_tags($_POST['subs'])); 

$sendmessage = mysql_query("INSERT INTO subscriber VALUES('','$subscriber',now())"); 
echo 'true'; 

} 

?> 

PS：在用户ID，电子邮件，日期时间

Answer 1

行的名称添加一个ID在窗体上：

<form id="myform" class="navbar-form navbar-right" action="includes/parse.php" method="post"> 

改变你的Javascript功能来：

<script type="text/javascript"> 
$(document).ready(function(){ 

    $("#myform").submit(function(event){ 
    username=$("#subs").val(); 


     $.ajax({ 
      type: "POST", 
      url: "includes/parse.php", 
      //data:dataString, 
      success: function(html){ 

     if(html=='true') 
       { 
       $("#subsc").fadeOut("normal"); 

       $("#subsc").html("Thank you for subscriping!"); 

       } 
       else 
       { 
        $("#subsc").html("Error in subscribing"); 
       } 
      }, 

     }); 
     event.preventDefault(); 
    }); 
}); 
</script> 

这将防止表单提交数据的默认行为以及明显的重定向。同样，通过处理表格的提交事件，您还可以处理表单可能通过其他方式提交的情况。

Answer 2

最简单的做法是将您的#subscribe元素的类型更改为button而不是submit。

<div id="subsc"> 
     <form class="navbar-form navbar-right" id="SubsForm"> 
      <div class="form-group"> 
      <input type="email" placeholder="Email" class="form-control" name="subscriber" id="subs" required="required"> 
      </div> 
      <input type="button" class="btn btn-success" id="subscribe" value="subscribe"> 
     </form> 
     </div> 

和JavaScript -

<script type="text/javascript"> 
$(document).ready(function(){ 

    $("#subscribe").click(function(){ 
     $.ajax({ 
      type: "POST", 
      url: "includes/parse.php", 
      data:$('#SubsForm').serialize(), 
      success: function(html){ 
       if (html=='true') { 
        $("#subsc").fadeOut("normal"); 
        $("#subsc").html("Thank you for subscriping!"); 
       } else { 
        $("#subsc").html("Error in subscribing"); 
       } 
      }, 
     }); 
    }); 
}); 
</script> 

更多关于$（）序列化可以在这里找到 - http://api.jquery.com/serialize/

的.serialize（）方法的标准网址 - 创建一个文本字符串编码 表示法。它可以充当已选择个人 表单控件一个jQuery对象....

Answer 3

我想有一个简单的方法在这里使用您现有的代码本身......相反，这些线： $（“＃订阅 “）点击（函数（）{ 用户名= $（” ＃潜艇 “）VAL（）;

使用这些行： $（” ＃订阅“）点击（函数（E）{ e.preventDefault（）; 。e.stopPropagation（）; username = $（“＃subs”）。val（）;

即使提交按钮，也应该停止表单回发。 希望这有助于。

Answer 4

首先将您的订阅按钮绑定到单击事件并删除属性action =“includes/parse”。PHP的”

<input type="button" class="btn btn-success" name="subscribe" id="subscribe" value="subscribe"> 

jQuery('#subscribe').click(function(){ 
    jQuery.ajax({ 
     url:'YOUR URL', 
     type:'POST', 
     data:'subsribe=true&email='+jQuery('#subs').val(), 
     success:function(data){ 
      if(data == 'true') 
      { 
       //enter code here 
       window.location.reload(true); 
      }else{ 
       //enter code here 
       alert(data); 
      } 
     } 
    }); 
}); 

服务器端

/* AJAX check */ 
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { 
      if(isset($_POST)){ 
    $subscriber = mysql_real_escape_string(strip_tags($_POST['subscriber'])); 
    $query = "INSERT INTO subscribers('email','timestamp') VALUES('$subscriber',NOW())"; 
    $sendmessage = mysql_query($query) or die(mysql_error()); 
    echo 'true'; 
      } 
    }