Question

（只是一个抬头，它是一个冗长的问题，但我确定它是ajax-php编码器的基本问题）我试图'在一个页面上的某些拖放事件更新数据库'并'在没有重新加载的情况下反映其他页面中的更改'。我已经编写了几乎所有的代码，需要你的帮助来找出问题所在。这是我写的Html，

First_html_file：

<head>
    <title>Coconuts into Gunnybags</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script type="text/javascript" src="script.js"></script>
</head>

<body>
    <div id="coconuts" style="float:left">
        <div class="coconut1" ondragover="allowDrop(event)" ondrop="drop(event)">
            <img id="drag1" ondragstart="drag(event)" draggable="true" src="coconut.png">
        </div>
        <div class="coconut2" ondragover="allowDrop(event)" ondrop="drop(event)">
            <img id="drag2" ondragstart="drag(event)" draggable="true" src="coconut.png">
        </div>

    </div>

    <div class="gunnybag" style="float:right">
        <div id="place1" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
        <div id="place2" ondragover="allowDrop(event)" ondrop="drop(event)"></div>

    </div>
</body>

所以有2个可拖动的椰子，有2个占位符（place1＆amp; place2）。我想要做的是当椰子被拖动并放置在其中一个占位符上时，应该更新数据库的值。（比如当椰子放在第一个占位符时，place_id 1 - true，place_id 2 - false）

为此，我正在从JS的drop函数调用一个php文件，就像这样..

JS_file：

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("coconut");
ev.target.appendChild(document.getElementById(data));
    var state = true;           
    var id = ev.target.id;
$.ajax({
     url: "db_update.php",        //calling db update file.
     type: "POST",
     data: { id: id, state: state },       //2 variables place_id and its     state(True/False)
     cache: false,
     success: function (response) {    //I dont know what to do on success. Can this be left blank like, success:         ?
         $('#text').html(response);
     }
 });
}

这是我的db_update， db_update：

    <?php

    $state = $_POST['state'];       //getting my variables state 'n ID
    $id = $_POST['id'];

    function begin()
    {
    mysql_query("BEGIN");
    }

    function commit()
    {
    mysql_query("COMMIT");
    }

    $con=mysql_connect("sqlservername","myuname", "mypass") or die(mysql_error());

    mysql_select_db("my_db", $con) or die(mysql_error());

    $query = "UPDATE gunnybag SET state = '{$state}' where id='{$id}'";  //will this work? or am I doing something wrong here??

    begin();

    $result = mysql_query($query);

    if($result)
    {
    commit(); 
    echo "successful";
    }

    ?>

在接收端我想更新gunnybag中的椰子而不重新加载页面，所以我写了这个使用db_fetch.php的ajax

ajx.js文件：

window.onLoad = doAjax;

function doAjax(){
$.ajax({
url: "db_fetch.php",
dataType: "json",
success: function(json){
    var dataArray = JSON.decode(json);
    dataArray.each(function(entry){
        var i=1;
        if(entry.valueName==true){
            $q('place'+i).css( "display","block" );
        }
        else{
            $q('place'+i).css( "display","none" );
        }
        i=i++;
    })
}

}).complete(function(){
      setTimeout(function(){doAjax();}, 10000);
    });
}

这是db_fetch.php：

<?php
try{
  $con=mysql_connect("sqlservername","myuname", "mypass") or die(mysql_error());
}
catch(Exception $e){
    echo $e;
}
mysql_select_db("my_db", $con) or die(mysql_error());

$q = mysql_query("SELECT 'state' FROM 'gunnybag' ");  //fetching all STATE from db
$query = mysql_query($q, $con);
$results = mysql_fetch_assoc($query);
echo json_encode($results);              //making it JSON obj

?>

最后我的另一个页面从哪里调用这个ajax。 Second_html_file：

    <head>
    <title>Coconuts into Gunnybags</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script type="text/javascript" src="ajx.js"></script>  
               //if i simply include the ajax script here will it be called 
             //automatically? i want this script to keep up with the changes in db.
</head>

<body>
    <div class="gunnybag" style="float:right">
        <div id="place1" style="display: ;"><img id="drag1"  draggable="true" src="coconut.png"></div>
        <div id="place2" style="display: ;"><img id="drag2"  draggable="true" src="coconut.png"></div>

    </div>
</body>

MAP： First_html_file-＆gt; JS_file-＆gt; db_update :: Second_html_file-＆gt; ajx.js-＆gt; db_fetch。

请指出此代码中有什么问题，还要回复//代码中的注释。非常感谢您的回复。谢谢！ #help我做对了＃对于ref，我在这里托管了文件，http://www.nagendra.0fees.net/admin.html＆amp; http://www.nagendra.0fees.net/cng.html

Answer 1

我看到的第一件事是：

你说：

var id = event.target.id;

但你在降低（ev）

所以改变一下：

var id = event.target.id;

为：

var id = ev.target.id;

首发。

然后你应该使用mysqli，因为不推荐使用mysql：

您的代码也可以进行SQL注入，因此请更改：

$state = $_POST['state'];       //getting my variables state 'n ID
$id = $_POST['id'];

为：

$state = ($_POST['state']) ? true : false;       
$id = intval($_POST['id']); //make sure an integer

用于数据库更新和检索的AJAX的基本用法

1 个答案: