页面在ajax中重新加载

I'm trying to build a subscribe form. The problem is that the page gets redirected, and the data doesn't get entered into db, page gets redirected to

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

HTML CODE

        <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 code:

<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 script for inserting data to database:

<?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: Name of rows in subscriber id, email, datetime

Add an id on your form:

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

Change your Javascript to:

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

This will prevent the default action of the form to submit the data and the apparent redirect. Also by handling the form's submit event you also handle the situation where the form may be submitted by other means.

The simplest thing to do would be changing the type of your #subscribe element to button instead of 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>

And 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>

More about $().serialize can be found here - http://api.jquery.com/serialize/

The .serialize() method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls....

I guess there is one simpler approach here using your existing code itself...Instead of these lines: $("#subscribe").click(function(){ username=$("#subs").val();

Use these lines: $("#subscribe").click(function(e){ e.preventDefault(); . e.stopPropagation(); username=$("#subs").val();

This should stop the form post back even for submit button. Hope this helps.

First bind your subscribe button to a click event and Remove attribute 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);
            }
        }
    });
});

SERVER SIDE

  /* 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';
            }
    }