Использование AJAX для получения ответа - но страница все еще обновляется

Question

У меня проблемы с заполнением формы и нажатием кнопки отправки, чтобы отправить мою информацию в базу данных.Проблема в том, что моя страница обновляется, хотя я использую AJAX, чтобы остаться на той же странице и получить ответ в «show_label».

Я проверил, вызывается ли addCustomerFunc путем изменения show_label, и ондействительно меняется!Но все равно обновляется и я теряю сообщение после обновления.Я надеялся, что кто-то может поймать мою ошибку (ы).

Это в моем customer.php

<script type="text/javascript">

function addCustomerFunc(add_LN,add_FN,add_PN,add_DOB)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("show_label").innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.open("POST","addCustomer.php",true);
xmlhttp.send("add_LN="+add_LN+"&add_FN="+add_FN+"&add_PN="+add_PN+"&add_DOB="+add_DOB);
}
</script>

    <p>Add New Customer:</p>
    <div align="center">
      <table width="337" border="1">
        <tr>
          <td width="154"><p>Last Name:</p>
          <p>First Name:</p>
          <p>Phone Number:</p>
          <p>Date of Birth:</p>
          <p>&nbsp;</p></td>
          <td width="167"><p align="center">
            <form>
                <input type="text" name="add_LN" id="add_LN" />
                <br/><br/>
                <input type="text" name="add_FN" id="add_FN" />
                <br /><br />
                <input type="text" name="add_PN" id="add_PN" />
                <br /><br />
                <input type="text" name="add_DOB" id="add_DOB" />
                <br /><br />
                <input type="submit" name="add_Customer" id="New_Customer_Form" value="Add Customer" onClick="addCustomerFunc(add_LN, add_FN, add_PN, add_DOB)"/>
            </form>
            <div id="show_label"/>
          </p>
          </td>
        </tr>
      </table>
      </div>

addCustomer.php

<?php
$username="****";
$password="****";
$database="****";

$lastName=$_POST['add_LN'];
$firstName=$_POST['add_FN'];
$phone=$_POST['add_PN'];
$dob=$_POST['add_DOB'];
//$membership==$_POST['membership'];

mysql_connect("******",$username,$password);

@mysql_select_db($database) or die( "Unable to select database");


$query = "INSERT INTO customer (last_name, first_name, phone_no, date_of_birth, membership) VALUES ('$lastName', '$firstName', '$phone', '$dob', 'T')";

if (mysql_query($query)){
    echo "Thanks";
} else 
{
    echo "Failed to insert customer into database";
}

mysql_close();

?>

Кроме того, правильно ли я передаю переменные в addCustomerFunc?Я правильно использую «Post»?

Спасибо!

Редактировать: У меня возникли проблемы с передачей переменных, потому что он говорит: Неопределенный индекс: add_LN в C: \ Users \ ej \ Desktop\ cpsc471 \ presentation \ addCustomer.php Хотя он добавляет пробелы в мою базу данных.

Answer 1

Поскольку вы используете форму, вам нужно убедиться, что вы захватили событие submit, прежде чем разрешить продолжить и обновить страницу.

Это должно сработать. (обратите внимание на return false)

<input type="submit" name="add_Customer" id="New_Customer_Form" value="Add Customer" onClick="addCustomerFunc(add_LN, add_FN, add_PN, add_DOB); return false;"/>

Answer 2

Измените тип вашей кнопки с:

submit до button

Таким образом, вы останетесь на 1 странице, и обновление исчезнет: -)

Answer 3

почему бы не использовать jQuery $.post() или $.get()?

кстати, используйте:

<input type="button" name="add_Customer" id="New_Customer_Form" value="Add Customer" onClick="addCustomerFunc(add_LN, add_FN, add_PN, add_DOB)"/>

вместо:

<input type="submit" name="add_Customer" id="New_Customer_Form" value="Add Customer" onClick="addCustomerFunc(add_LN, add_FN, add_PN, add_DOB)"/>