頁面在ajax中重新加載

Question

我正在嘗試建立一個訂閱表單。 問題是頁面被重定向，並且數據沒有輸入到db中，頁面被重定向到

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>

這將阻止表單的默認操作來提交數據和明顯的重定向。 此外，通過處理表單的Submit事件，您還可以處理可能通過其他方式提交表單的情況。

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>

關於$（）。serialize的更多信息可以在這里找到-http: //api.jquery.com/serialize/

.serialize（）方法以標准的URL編碼表示法創建文本字符串。 它可以作用於已選擇單個表單控件的jQuery對象。

Answer 3

我想這里有一種使用您現有代碼本身的簡單方法...代替這些行：$（“＃subscribe”）。click（function（）{username = $（“＃subs”）。val（）;

使用以下行：$（“＃subscribe”）。click（function（e）{e.preventDefault（）;。e.stopPropagation（）; username = $（“＃subs”）。val（）;

這應該停止表單回發，即使是提交按鈕也是如此。 希望這可以幫助。

Answer 4

首先將您的訂閱按鈕綁定到click事件，然后刪除屬性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';
            }
    }