Jquery + ajax.我的javascript函数有什么问题?删除记录，添加记录而不刷新
jquery + ajax. what is wrong in my javascript function? delete record, add record without refreshing
我的JavaScript有什么问题?在不刷新页面的情况下添加一个记录，这是有问题的。
在一些有经验的用户的帮助下，我完成了完全删除。但是现在向数据库添加记录还不能工作我想添加一个记录动态现在不刷新。删除功能运行良好，并反映在数据库中。
我将包括四个文件和我的数据库:
- 文件是
index.php为我的主 -
add.php添加记录 -
delete.php用于删除记录 - dbconfig用于数据库连接和配置
index.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title</title>
</head>
<body>
<?php
include("dbconfig.php");
$sql = "SELECT * FROM games";
$result = mysql_query($sql);
while ($record = mysql_fetch_array($result)){
echo "<p class='"p" .$record['ID']. "'"></br> Game ID: " .$record['ID']. "</br> Game Name: " .$record['Name'].
"<br /> Game Type: ".$record['Type']. "<br /> Rating: ".$record['Rating']."<br /> Year Released: ".$record['Release Year']."<br /> <br />" ?>
<a href="#" id="<?php echo $record["ID"]; ?>" class="deletebutton"><img src="trash.png" alt="delete"/> </a></p>
<?php
}
?>
<form name="add" id ="add" action="" method="post">
<input class ="gameID" type="hidden" id="ID" name="ID" value = " ' .$record['ID'] . ' " />
<b>Game Name: </b> <input type="text" id="name" name="name" size=70>
<b>Game Type:</b> <input type="text" id="type" name="type" size=40>
<b>Rating: </b> <input type="number" id="score" name="score" min="1.0" max="10.0" step ="0.1"/>
<b>Year Released: </b> <input type="number" min="1900" max="2011" id="Yreleased" name="Yreleased" value="1985" size=4>
<p><input type="submit" name="Submit" id = "Submit" value="Add Game" class = "add games"></p>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
$("#add").submit(function(){
var name = this['name'].value;
var type = this['type'].value;
var rating = this['score'].value;
var release = this['Yreleased'].value;
var dataString = 'name='+ name + '&type=' + type + '&rating=' + rating + '&release=' + release;
if (name == '' || type == '' || rating == '' || release == ''){
alert("please enter some valid data for your game entry");
}else
$.ajax({
type: "POST",
url: "add.php",
data: dataString,
success: function(){
window.location.reload(true);
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
}
)});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
$("a.deletebutton").click(function(){
var del_id = $(this).attr("id");
var info = 'id=' + del_id;
var parent = $(this).parent();
if(confirm("Sure you want to delete this game? !..There is no Undo")){
$.ajax({
type: "get",
url: "delete.php?" + info,
context: document.body,
success: function(){
$('.p'+del_id).html('deleted');
$('.success').fadeIn(200).show();
}
});
}
return false;
});
});
</script>
</body>
</html>
add.php:
<?php
require('dbconfig.php'); //we cannot continue without this file, thats why using require instead of include
if(isset($_POST['name']))
{
$name=addslashes($_POST['name']);
$type=addslashes(($_POST['type']));
$rating=addslashes($_POST['rating']);
$release=addslashes($_POST['release']);
$sql = 'INSERT INTO `games` (`Name`,`Type`,`Rating`,`Release Year`) VALUES ("'.$name.'", "'.$type.'", "'.$rating.'", "'.$release.'")';
mysql_query( $sql);
if(!mysql_errno())
echo " your game has been added to the list of games. ";
}
?>
delete.php:
<?php
require('dbconfig.php'); //we cannot continue without this file, thats why using require instead of include
if(isset($_GET['id']))
{
$id=(int)$_GET['id'];
$sql = 'DELETE FROM `games` WHERE `ID`="'.$id.'" LIMIT 1';
mysql_query( $sql);
echo 'deleted';
}
?>
dbconfig:
<?php
$user_name = "root";
$password = "";
$database = "gamebook";
$server = "localhost";
$bd = mysql_connect($server, $user_name, $password) or die ('I cannot connect to the database because:' . mysql_error());
mysql_select_db($database);
?>
如果需要，下面是我的数据库的模式:
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Database: `gamebook`
--
CREATE DATABASE `gamebook` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `gamebook`;
-- --------------------------------------------------------
--
-- Table structure for table `games`
--
CREATE TABLE IF NOT EXISTS `games` (
`ID` int(4) NOT NULL AUTO_INCREMENT,
`Name` varchar(70) COLLATE utf8_unicode_ci NOT NULL,
`Type` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
`Rating` float NOT NULL,
`Release Year` int(4) NOT NULL,
PRIMARY KEY (`ID`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ;
--
-- Dumping data for table `games`
--
INSERT INTO `games` (`ID`, `Name`, `Type`, `Rating`, `Release Year`) VALUES
(1, 'Battlefield 3', 'First Person Shooter', 8.5, 2011),
(2, 'Fifa 12', 'Sports', 9.2, 2004),
(3, 'Red Alert 3', 'Strategy ', 8.8, 2007),
(4, 'Fight Night Round 4', 'Fighting', 9, 2010),
(5, '', '', 0, 0),
(6, '', '', 0, 0);
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
什么是错误的在我的javascript和什么是最好的方法来找出??
对于像我这样的初学者，你们推荐一个好的文本编辑器吗?
我马上注意到一些事情。
<标题> jQuery语法首先，你的JavaScript语法是关闭的。在第一个文件(index.php)中有以下行:
$("#add").load("add.php") {
这不是.load()方法的正确语法。基本上，你有这个:
$("#add").load("add.php") {
// ... stuff to happen after add.php loads
}
你应该拥有的是:
$("#add").load("add.php", function() {
// .. stuff to happen after add.php loads
});
记住，你需要以回调的形式添加这个额外的功能，否则它将不起作用。
<标题>调用不一致在我处理的第一个代码块中，看起来您正在尝试加载add.php，然后在加载后触发一些JavaScript命令。但是查看add.php文件的源代码，您不会希望这样做。您的add.php文件包含服务器端代码，用于处理向数据库添加记录…你不直接加载它，你只需要向它提交POST请求。
您没有正确地将数据发送到服务器。使用add例程，首先创建一个数据字符串:
var dataString = 'ID=' + id 'name='+ name + '&username=' + type + '&password=' + rating + '&gender=' + release;
然后你通过AJAX将其发送到数据包中:
$.ajax({
type: "POST",
url: "add.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
这里的问题是双重的。首先，您没有正确编码数据。'ID=' + id 'name='缺少+字符，将中断。但是，即使修复了这个问题，您也会不正确地连接数据。您的dataString变量最终看起来像:
ID=1name=Bob&username=my_user&password=password&gender=male
你看你怎么少了一个&符号?这是一个容易犯的错误，所以发送一个data 对象。你不太可能遗漏字符:
$.ajax({
type: "POST",
url: "add.php",
data: {
},
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
接下来，将数据传递给服务器，但要检查不同的值。你的JavaScript添加数据看起来像它想要发送:
- ID <
- 名称/gh>
- 用户名
- 性别
但是你的add.php正在检查:
- 提交 <
- 名称/gh>
- 得分
- Yreleased
在delete例程中，您正在检查GET中的"ID"的值。这意味着该值需要作为附加到URL的查询参数传递。例如:delete.php?ID=5，删除ID为5的游戏。
在PHP中检查这个很好，但实际上并没有在AJAX请求中发送数据。你的代码应该看起来像这样:
$("a.deletebutton").click(function(){
var del_id = $(this).attr("id");
var info = 'id=' + del_id;
var parent = $(this).parent();
if(confirm("Sure you want to delete this game? !")){
$.ajax({
type: "get",
url: "delete.php?" + info,
context: document.body,
success: function(){
$('.p'+del_id).html('deleted');
}
});
}
return false;
});
见url: "delete.php"变为url: "delete.php?" + info ?这将把您的ID附加到url，并使$_GET['id']在PHP中可用。
从第一眼看，我可以看出id没有作为参数传递给delete.php脚本。尝试将data: info添加到ajax调用中。这可能是让它工作的第一步。
我看到的另一个问题是$(this).attr("id")不会给你要删除的游戏id，而是按钮元素的id ("Submit")。相反，您应该使用$("#ID").val()从隐藏字段获取值。
相关文章：
- 使用Rails 3中的AJAX删除记录
- 使用jquery和ajax删除记录
- Rails Production-可以工作，但不能编辑/删除/创建记录
- 尝试使用Promises删除记录
- 如果用户选择离开网页，如何删除记录
- 通过javascript从浏览器历史记录中删除URL
- 如何在删除第二个表中的所有记录后删除具有日期值的tr
- 无需点击php即可确认记录删除
- 删除记录确认消息
- 模型没有'在Emberjs中删除记录后不会更新
- 如何在js中从数组中删除记录
- Delete方法不适用于Indexed DB HTML5.它返回成功，但未删除记录
- 立即删除范围记录 - mongodb
- 剑道网格在删除后仍显示最后一条记录
- 从外部 iFrame 重定向和链接中删除历史记录
- 从 ExtJs 4.1 存储中删除记录时触发哪些事件
- 本地存储循环删除 2 条记录后缺少记录(在不同的页面上）
- 如何在 mvc3 Web 应用程序的生产版本中删除 JS 日志记录调用
- 为什么使用挖空在确认框中单击“取消”时删除记录
- Postgre使用Ajax函数在带有复选框的数据库中进行多记录删除查询，不会返回任何结果;不起作用
