使用 javascript 获取 DIV 的内容，.innerHTML 不起作用？

Question

我目前有一个 jQuery 拖放操作，想将最终结果插入数据库。我想使用 Javascript 来获取值，但我一直在获取结果 'NULL'，而不是实际内容（由 PHP/MySQL 生成）

这是我的JavaScript

function getValue() {
var ajaxRequest;  // The variable that makes Ajax possible!
try{

  // Opera 8.0+, Firefox, Safari
  ajaxRequest = new XMLHttpRequest();
    }catch (e){

  // Internet Explorer Browsers
  try{
     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  }catch (e) {

     try{
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
     }catch (e){

        // Something went wrong
        alert("Your browser broke!");
        return false;
     }
  }
  }

var left1 = document.getElementById('left1').getAttribute('value');
var left2 = document.getElementById("left2").getAttribute('value'); 
var left3 = document.getElementById("left3").getAttribute('value');

 var queryString = "?left1=" + left1 ;
 queryString +=  "&left2=" + left2 + "&left3=" + left3;
  ajaxRequest.open("GET", "http://localhost:8888/ff/public_html/drag_and_drop.php" + queryString, true);
 ajaxRequest.send(null); 
}

PHP代码：

$dinner1 = $_GET['dinner1'];
$dinner2 = $_GET['dinner2'];
$dinner3 = $_GET['dinner3'];

$query2 = "INSERT INTO weekly_print (dinner1, dinner2, dinner3) VALUES ('".$dinner1."','".$dinner2."','".$dinner3."')";
            $result2 = mysql_query ($query2) or trigger_error("Query: $query\n<br />MySQL Error: " . mysql_error());
            if (@mysql_num_rows($result2) != 0) {
                echo 'Success!!';

        }
}

我试过在没有 getAttrubute('value'); 的情况下使用它，但结果我一直得到 [object HTMLDivElement]。

这些都是类似的问题，但对我来说根本没用。

Get content of a DIV using JavaScript
JavaScript innerHTML not working

当使用 innerHTML 时，我得到结果 '[object HTMLDivElement]'。

我知道我需要切换到 mysqli 而不是 mysql，它目前在测试服务器上，所以请忽略它。

我的HTML:

<div class="column" id="left1" style="border: 2px solid #a13f80;"></div>
<div class="column" id="left2" style="border: 2px solid #a13f80;"></div>
<div class="column" id="left3" style="border: 2px solid #a13f80;"></div>

Answer 1

你只需要获取值而不是属性： document.getElementById('left1').value;

将您的代码替换为：

var left1 = document.getElementById('left1').value;
var left2 = document.getElementById("left2").value; 
var left3 = document.getElementById("left3").value;

并将您的 div 结构转换为输入字段，因为从 div 获取值并将其传递给 php 是非常不标准的方法：

<input class="column" id="left1" style="border: 2px solid #a13f80;" />
<input class="column" id="left2" style="border: 2px solid #a13f80;" />
<input class="column" id="left3" style="border: 2px solid #a13f80;" />

Answer 2

你的 div 是空的，这就是 innerHTML 不起作用的原因

PS: 无法评论小点

Answer 3

使用 innerText 或 textContent 属性获取 div 文本。

left1div = document.getElementById('left1');
var left1divval = left1div.textContent || left1div.innerText;   
alert(left1divval);

See Working Example

使用 javascript 获取 DIV 的内容，.innerHTML 不起作用？

Get content of DIV using javascript, .innerHTML not working?

html

javascript

php

mysql

innerhtml