Javascript 将记录添加到数据库而不刷新_Javascript_Ajax_Jquery

Javascript 将记录添加到数据库而不刷新

javascript ajax jquery

Javascript 将记录添加到数据库而不刷新,javascript,ajax,jquery,Javascript,Ajax,Jquery,我想动态添加一个记录。当我为表单插入action=“add.php”时，通过刷新后显示一条消息来完成添加。我想添加此添加而不动态刷新另外，对于我的游戏ID，我希望在删除记录时，ID被递减或删除。因此，当我再次添加一个游戏时，它会使用下一个可用的ID，而不是像现在这样不断增加如果我从action中删除add.php，则什么都不会发生，游戏也不会添加。我的问题是，这个脚本在哪里被破坏了？或者如果add.php运行不正常这是我的index.php和add.php <!DOCTYPE

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

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

如果我从action中删除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>


标题

游戏名称：
游戏类型：
评级：
发布年份：

$（文档）.ready（函数（）{
$（“#添加”）.submit（函数（）{
var name=此['name'].值；
变量类型=此['type'].值；
var评级=该['score']值；
var release=此['Yreleased'].值；
var dataString='name='+name+'&type='+type+'&rating='+rating+'&release='+release；
如果（名称=“”| |类型=“”| |评级=“”| |发布=“”）{
警报（“请为您的游戏条目输入一些有效数据”）；
}否则
$.ajax({
类型：“POST”，
url:“add.php”，
数据：dataString，
成功：函数（）{
window.location.reload（true）；
$（'.success'）.fadeIn（200.show（）；
$（'.error'）.fadeOut（200.hide（）；
}
});
返回false；
}
)});
$（文档）.ready（函数（）{
$（“a.deletebutton”）。单击（函数（）{
var del_id=$（this.attr（“id”）；
var info='id='+del_id；
var parent=$（this.parent（）；
如果（确认（“确定要删除此游戏？！..没有撤消”））{
$.ajax({
键入：“获取”，
url:“delete.php？”+信息，
上下文：document.body，
成功：函数（）{
$（'.p'+del_id）.html（'deleted'）；
$（'.success'）.fadeIn（200.show（）；
}
});
}
返回false；
});
});

add.php

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

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

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

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

“.submit（）”应该有一个小写的“s”，并且您正在使用的选择器“add games”不会返回任何元素，因为它会查找标记名为“games”的元素，这些元素是标记名为“add”的元素的后代

您要做的是修复“s”的大小写，并通过id选择元素，这是使用“#yourid”完成的。您的表单名称的id为“add”，请执行以下操作：

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

另外，document.ready和submit处理程序函数的主体周围都有一对额外的

{}

花括号，因此您应该删除它们：

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

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

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

然后，即使您在浏览器中似乎没有收到响应，也要检查您的数据库以查看是否添加了记录。

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

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

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

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

您要做的是修复“s”的大小写，并通过id选择元素，这是使用“#yourid”完成的。您的表单名称的id为“add”，请执行以下操作：

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

另外，document.ready和submit处理程序函数的主体周围都有一对额外的

{}

花括号，因此您应该删除它们：

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

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

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

进行一些更改：

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

或

至于id问题，MySQl将不断增加id，如果您删除一个，它不会减少id。我可以知道你为什么要整理身份证吗

再次编辑：（使用json.js）

进行一些更改：

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

或

至于id问题，MySQl将不断增加id，如果您删除一个，它不会减少id。我可以知道你为什么要整理身份证吗

再次编辑：（使用json.js）

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

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

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

您没有在上面的代码中定义

id

。这导致函数在调用

return false

之前抛出异常。哟