jquery + ajax。 我的javascript函数有什么问题？ 删除记录，添加记录而不刷新

我的JavaScript出了什么问题？ 它在某个地方打破了添加记录而没有刷新页面。

我现在在一些有经验的用户的帮助下完全删除了。 但是现在向数据库添加记录还没有工作

我想现在动态添加一个记录而不刷新..删除运行良好，它正在数据库中反映出来。

我将包括4个文件和我的数据库：

• 我的主要文件是index.php
• add.php用于添加记录
• delete.php用于删除记录
• dbconfig用于数据库连接和配置

index.php ：

        <?php include("dbconfig.php"); $sql = "SELECT * FROM games"; $result = mysql_query($sql); while ($record = mysql_fetch_array($result)){ echo "

 Game ID: " .$record['ID']. "
 Game Name: " .$record['Name']. "
 Game Type: ".$record['Type']. "
 Rating: ".$record['Rating']."
 Year Released: ".$record['Release Year']."
 
" ?> <a href="#" id="" class="deletebutton"> 
  
  Game Name:   Game Type:  Rating:   Year Released:   
 
   $(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; } )});    $(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; }); });    

add.php ：

delete.php ：

DBCONFIG：

如果需要，这里也是我的数据库的架构：

  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有什么问题，最好的方法是什么？

你们为像我这样的初学者推荐一个好的文本编辑器吗？

Answer 1

我注意到了一些事情。

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 }); 

请记住，您需要以回调的forms添加此额外function，否则它将无法正常工作。

呼叫不一致

在我发现的第一个代码块中，看起来你正在尝试加载add.php ，然后在加载后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 

你看到你错过了一个&符号？ 这是一个容易犯的错误，所以改为发送一个数据对象 。 你不太可能错过角色：

 $.ajax({ type: "POST", url: "add.php", data: { }, success: function(){ $('.success').fadeIn(200).show(); $('.error').fadeOut(200).hide(); } }); 

数据不匹配

接下来，您将数据传递到服务器，但检查不同的值。 您添加数据的JavaScript看起来像是要发送：

• ID
• 名称
• 用户名
• 密码
• 性别

但是你的add.php正在检查：

• 提交
• 名称
• 类型
• 得分了
• Yreleased

缺失数据

使用删除例程，您将在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 url: "delete.php?" + info ？ 这会将您的ID附加到url，并在PHP中提供$_GET['id'] 。

Answer 2

从第一眼看，我可以告诉id不作为参数传递给delete.php脚本。 尝试将data: info添加到ajax调用。 这可能是让它运转的第一步。

我看到的另一个问题是$(this).attr("id")不会给你删除游戏的id但是按钮元素的id（ "Submit" ）。 相反，你应该使用$("#ID").val()来从隐藏字段中获取值。