AJAX - 将数据发送到我的php文件似乎不起作用

Question

我还是JQuery,AJAX和PHP的新手.

我想知道我在这里做错了什么.我正在接收有关客户的信息并尝试在同一页面上返回确认消息.

所以我遇到的问题:1)点击提交按钮刷新我的页面？为什么？

2)我的提交按钮下方.如何使用addCustomer.php的结果更改其文本？

3)将我的javascript和php代码放在customer.php下的同一个文件中是否可以？

编辑:我也使用Firefox的防篡改数据插件 - 当我点击提交时,由于某种原因没有发送数据.

Customer.php

<script type="text/javascript">

$(document).ready(function(){
    $('#submit').click(function() {
        $.ajax({
            type : 'POST',
            url : 'addCustomer.php',
            dataType : 'json',
            data:{
                add_LN : $('#add_LN').val(),
                add_FN : $('#add_FN').val(),
                add_PN : $('#add_PN').val(),
                add_DOB : $('#add_DOB').val()
            },
            success : function(data){
                //I want to change the "confirmMsg" to the string given back from addCustomer.php
            }
        }
    }
}

</script>

<p>&nbsp;</p>
<p>Add New Customer:</p>
<div align="center">
<form>
  <table width="396" border="1">
    <tr>
      <td width="133"><p>Last Name:</p>
      <p>First Name:</p>
      <p>Phone Number:</p>
      <p>Date of Birth:</p></td>
      <td width="144"><p>
        <input type="text" name="add_LN" id="add_LN" />
        </p>
      <p>
        <input type="text" name="add_FN" id="add_FN" />
        </p>
      <p>
        <input type="text" name="add_PN" id="add_PN" />
        </p>
      <p>
        <input type="text" name="add_DOB" id="add_DOB" />
      </p>        </td>
      <td width="97"><input type="submit" name="submit" id="submit" value="Add Customer" /></td>
      <div id="confirmMsg"/>
        </tr>
      </table>
    </form>
  </div>
<p>&nbsp;</p>
</div>
</div>

addCustomer.php

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

if (isset ($_POST['add_LN']))
    $lastName=$_POST['add_LN'];
else
    die("Last Name not passed in POST");

if (isset ($_POST['add_FN']))
    $firstName=$_POST['add_FN'];
else
    die ("First Name not passed in POST");

if (isset ( $_POST['add_PN']))
    $phone=$_POST['add_PN'];
else
    die("Phone Number not passed in POST");

if (isset ($_POST['add_DOB']))
    $dob=$_POST['add_DOB'];
else
    die("Date of Birth not passed in Post");

//$membership==$_POST['membership'];

mysql_connect("dbs4.cpsc.u.ca",$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();
?>

非常感谢你的帮助!

Answer 1

好的，按顺序回答你的问题：

1. 您应该能够在“控制台”选项卡中从 Firebug（您正在使用 Firebug，对吧？）进行检查，以查看 addCustomer.php 是 Ajax 请求所调用的端点。如果失败，您可以将以下代码添加到脚本中：

   $('#confirmMsg').ajaxComplete(function(e, xhr, settings) {
       $(this).text('The response from your page is ' + xhr.responseHTML);
   });
   

2. 我假设你的问题是“我的提交按钮下面有一个 div...”。尝试以下命令（这是完整 Ajax 方法的简化版本）：

   $.post('addCustomer.php', {
       add_LN : $('#add_LN').val(),
       add_FN : $('#add_FN').val(),
       add_PN : $('#add_PN').val(),
       add_DOB : $('#add_DOB').val()
   }, function(data){
       $('#confirmMsg').text(data);
   });
   

3. 最后，是的 - 将脚本和 PHP 代码放在同一页面上是可以的。PHP 代码在呈现到浏览器之前在服务器上执行，而 JavaScript 在客户端工作，在页面交付后执行。