Question

我想动态添加记录。当我为我的表单插入action =“add.php”时，通过刷新后显示一条消息来完成添加。我想添加这个添加而不动态刷新。

另外，对于我的游戏ID，我希望在删除记录时，减少或删除ID。因此，当我再次添加游戏时，它会使用下一个可用的ID，而不是继续增加，就像现在发生的一样。

如果我从行动中取消add.php，则没有任何反应并且不会添加游戏。我的问题是，这个脚本在哪里坏了？或者如果add.php无法正常工作？

这是我的index.php和add.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. ";
    }
?>

Answer 1

您的代码目前正在尝试做的是正确的原则：您正试图在表单上捕获提交事件，改为发出Ajax请求，然后取消默认提交。

它不起作用的原因是这一行：

$("add games").Submit(function(){

“。submit（）”应该有一个小写的“s”，你正在使用的选择器“添加游戏”，不会返回任何元素，因为它会查找标签名为“games”的元素标签名为“add”的元素的后代。

你要做的是修复“s”的大小写，然后按id选择你的元素，你用“#yourid”来做。您的表单名称的ID为“add”，因此请执行以下操作：

$("#add").submit(function(){

同样，你的document.ready和你的提交处理函数在你的身体周围都有一对额外的{}花括号，所以你应该删除它们：

$("#add").submit(function(){
   {                           // <- delete this {
      /*function body code*/
   }                           // <- delete this }
});

此外，您还要将jquery.js脚本包括两次 - 一次就足够了。并且您不需要两个document.ready处理程序，您可以将它们组合成一个（尽管可以有多个并且不会导致问题）。

（可能还有其他一些问题，但请先尝试一下，然后再回复我们。）

更新：在其他修复之后，我怀疑问题现在在您的PHP中，在行中：

if(isset($_POST['Submit']))

我不知道PHP，但我认为这是检查一个名为'Submit'的请求参数，你没有在你的JS中设置（这是你的提交按钮的名称，并且会被设置为“标准“，非Ajax提交，但它不会包含在您的Ajax请求中）。尝试更改该行以使用您正在设置的请求参数，例如：

if(isset($_POST['name']))

然后，即使您似乎没有在浏览器中获得响应，请检查您的数据库以查看是否正在添加记录。

Answer 2

进行一些更改：

$("add games").submit(function(){ }); -> $(".add games").Submit(function(){});

或

$("#add").submit(function(){}); or    $("#add").click(function(){ //run your ajax script here});

对于id问题，MySQl将继续增加id，如果删除一个，它将不会减少它。我可以知道你为什么要按顺序排列ID吗？

再次编辑:(使用json.js）

here is another workaround:

var postdata = new Object();
postdata.name = value;
postdata.type = value;
postdata.rating = value;
//and so on

$.ajax({ 
        url: 'your url', 
        type: "POST", 
        contentType: "application/json; charset=utf-8", //add this
        data: JSON.stringify(postdata), //another change
        dataType: "json", 
        success: function(data, st) { 
            if (st == "success") { 
                alert('Data Added');
            } 
        }, 
        error: function() { 
            alert("Failed!"); 
        } 
    });

Answer 3

除了其他人帮助的问题之外，您的表单仍在提交，因为这一行：

if (id =='' || name == '' || type == '' || rating == '' || release == ''){

您没有在其上方的代码中定义id。这导致函数在调用return false之前抛出异常。您需要从if语句中删除id =='' ||或在函数中定义它。

作为旁注，我看到您使用以下内容从表单中提取数据：

var name = $("#name").val();
var type = $("#type").val();

在提交处理程序中，this是表单对象，这意味着您可以按名称访问表单字段。我建议使用以下属性：

var name = this['name'].value,
    type = this['type'].value;

这样，您不需要表单字段上的ID，如果需要，您可以在文档中多次插入相同的表单。

此外，您应该验证表单输入。用户可以在您的任何字段中输入"); DROP TABLE games;//或<script src='http://evil.com/bad.js'></script>，这真的会毁了您的生活。

无需刷新即可将记录添加到数据库

add.php

3 个答案: