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

Question

我还是 JQuery、AJAX 和 PHP 的新手。

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

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

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

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

编辑：我也在使用 Firefox 的 Tamper Data Addon - 当我点击提交时，由于某种原因没有发送任何数据。

客户.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 在客户端工作，在页面交付后执行。

Answer 2

1) 您可以在点击功能上使用“preventDefault”。 2）您可以通过仅显示“confirmMsg”div来添加成功消息（先用css隐藏） 3）如果那对你有用，那没关系。但我自己尝试将所有代码保存在一个地方，例如。 “main.js”

查看代码：^my changes^“只需删除 ^ 即可：)”

<script type="text/javascript">

$(document).ready(function(){
    $('#submit').click(function(^e^) {
        ^e.preventDefault();^
        $.ajax({
            type : 'POST',
            url : 'addCustomer.php',
            ^data: $('form').serializeArray(),^
            success : function(data){
                ^$('#confirmMsg').show();^
            }
        }
    }
}

</script>

我认为这应该可以解决问题:) 我添加了 serializeArray 函数以使其更具动态性，因为如果您有更多输入字段，则不必再次更改 js 代码。 http://api.jquery.com/serializeArray/

您可以看到表单发送的内容，首先打开 firebug 并重新加载页面，然后输入字段然后提交。您将在“控制台”选项卡中看到一些变化；）

希望对你有所帮助。

Answer 3

我建议你将 dataType: 'json' 更改为 dataType: 'text'，这可能是 jQuery 的绊脚石。

并将您的成功处理程序更改为

success: function(data){
    $("#confirmMsg").html(data);
}

Answer 4

问题是不在该文件的头部。它解决了我所有的问题，但不知道为什么。感谢所有贡献的人

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#submit').click(function(e) {
        $.ajax({
            type : 'POST',
            url : 'addCustomer.php',
            dataType : 'json',
            data:{
                lastName : $('#add_LN').val(),
                firstName : $('#add_FN').val(),
                phone : $('#add_PN').val(),
                dob : $('#add_DOB').val()
            },
            success : function(data){
                if (data.error === true){
                    alert("there was an error in the post layer");
                } else {
                    $('#confirmMsg').html(data);
                }
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
        return false;
    });
});
</script>