AJAX和php用於數據庫更新和檢索的基本用法

Question

（只是抬起頭，這是一個冗長的問題，但我肯定這是一個針對ajax-php編碼器的非常基本的問題）我試圖“在一頁上的某些drag n drop事件上更新db”，並“在不重新加載的情況下反映另一頁上的更改'。 我已經寫了幾乎所有的代碼，需要您的幫助來找出問題所在。 這是我寫的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和place2）。 我想做的是將椰子拖到一個占位符上后，數據庫的值應該更新。 （例如，將椰子放在第一個占位符中，place_id 1-真，place_id 2-假）

為此，我正在像這樣從JS的drop函數對aphp文件進行ajax調用。

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

    ?>

在接收方，我想在不重新加載頁面的情況下更新麻袋里的椰子，因此我編寫了使用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-> JS_file-> db_update :: Second_html_file-> ajx.js-> db_fetch。

請指出此代碼中的錯誤，並響應代碼中的//注釋。 非常感謝您的回復。 謝謝！ ＃幫助我正確處理＃為了便於參考，我在此處托管了文件，網址為http://www.nagendra.0fees.net/admin.html和http://www.nagendra.0fees.net/cng.html

Answer 1

我首先看到的是：

你說：

var id = event.target.id;

但是你在drop（ev）中貼上ev

因此更改：

var id = event.target.id;

至：

var id = ev.target.id;

對於初學者。

然后，由於不建議使用mysql，因此應使用mysqli ：

您的代碼也可以進行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和php用於數據庫更新和檢索的基本用法

問題描述

1 個解決方案

解決方案1
1 2013-04-12 08:32:17

AJAX和php用於數據庫更新和檢索的基本用法

問題描述

1 個解決方案

解決方案1 1 2013-04-12 08:32:17

解決方案1
1 2013-04-12 08:32:17