2013-04-11 14 views
0

(只是一个头,它是一个冗长的问题,但我确定它的一个ajax-php编码器的基本问题) 我试图'更新数据库上的一些拖ñ滴事件在一个页面上“和”反映其他页面中的更改而不重新加载“。我已经写了几乎所有的代码,需要你帮忙弄清楚什么是错的。这是我写的HTML,用于数据库更新和检索的AJAX与PHP的基本用法

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 - 假)

对于这一点,我在做Ajax调用从这样的JS的下降功能的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椰子无需重新加载日Ë页面,所以我写了这个AJAX它采用db_fetch.php

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 

?> 

最后我的其他页面,这阿贾克斯被称为来自。 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

回答

1

我看到的第一件事是:

你说:

var id = event.target.id; 

但你decalare在下降EV (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 
+0

是的,我已经改变它,但我的id不是一个int值,它实际上是p1/p2。第一个html工作正常,第二个没有从ajax获取值。 – Rao