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

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

您应该可以在“控制台”选项卡中查看Firebug（使用Firebug，对吗？），以查看addCustomer.php是您的Ajax请求调用的端点。如果做不到这一点，您可以将以下代码添加到脚本中：
```
$('#confirmMsg').ajaxComplete(function(e, xhr, settings) {
    $(this).text('The response from your page is ' + xhr.responseHTML);
});
```

我假设你的问题是“我的提交按钮下面有一个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);
});

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

Answer 2

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

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

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

Answer 3

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

请参阅代码：^我的更改^“只需删除^以使其正常工作:)”

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

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

4 个答案: