AJAX - Sending data to my php file does not seem to work
本问题已经有最佳答案,请猛点这里访问。
我对jquery、ajax和php还是个新手。
我在想我在这里可能做错了什么。我正在接收有关客户的信息,并尝试在同一页上返回确认消息。
所以我面临的问题是:1)单击提交按钮刷新我的页面?为什么?
2)我的提交按钮下面有一个。我怎样才能用addcustomer.php的结果更改它的文本呢?
3)是否可以将我的javascript和php代码放在customer.php下的同一个文件中?
编辑:我也在使用火狐的篡改数据插件-当我单击提交时,由于某种原因没有发送数据。
客户机
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <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 } } } } <p> </p> <p> Add New Customer: </p> <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> </tr> </table> </form> <p> </p> |
Advutual.PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <?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(); ?> |
非常感谢你的帮助!
好的,按顺序回答您的问题:
您应该能够从Firebug中进行检查(您使用的是Firebug,对吗?)在控制台选项卡中查看addcustomer.php是Ajax请求调用的端点。如果失败,可以将以下代码添加到脚本中:
1 2 3 | $('#confirmMsg').ajaxComplete(function(e, xhr, settings) { $(this).text('The response from your page is ' + xhr.responseHTML); }); |
我假设您的问题是"我的提交按钮下有一个分区…"。尝试以下命令(这是完整Ajax方法的缩短版本):
1 2 3 4 5 6 7 8 | $.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在客户端工作,在页面交付后执行。