Question

我想使用某个元素的ID并将其转换为javascript变量，然后在Ajax请求中使用。以下是通过ajax输出到我的HTML页面的次数，多次取决于搜索。

我想要做的是从中获取$ row [ID]并将其作为javascript变量，然后可以使用Ajax将其传递到另一个脚本。该函数如下所示：

while ( $row ) {

  echo "<div class='reviewdiv'>";
  echo "<h4>Name: " . $row[name] . "</h4>";
  echo "<h4>Type: " . $row[type] . "</h4>";
  echo "<h4>Country: " . $row[country] . "</h4>";
  echo "<h4>Region: " . $row[region] . "</h4>";
  echo "<h4>Added by: " . $row[username] . "</h4>";
  echo "<h4>Description: " . $row[description] . "</h4>";
  echo "<h4>Review This Place:</h4>";
  echo "<textarea name='review' class='userreview'></textarea>";
  echo "<input type='hidden' name='review' value='" . $row[ID] . "'>";
  echo "<input type='button' value='Submit Review' onclick='reviewajaxrequest()'>";
  echo "<h4><a href='reviewresults.php?PlaceID=" . $row[ID] . "'>View reviews</a></h4>";
  echo "<h4><a href='recommend.php?PlaceID=" . $row[ID] . "'>Recommend this place</a></h4>";
  echo "</div>";

  $row = $results->fetch();

}

我想要定义变量“review box”和“id”，如果它与点击触发该功能的按钮的结果相同，并将它们发送到另一个脚本。有什么帮助吗？

Answer 1

如果您使用的是jQuery，这将有效。

将审核按钮的代码更改为：

echo "<input type='button' value='Submit Review' data-id='".$row['ID']."' onclick='reviewajaxrequest()'>";

然后将您的功能更改为：

function reviewajaxrequest() {
    var xhr3 = new XMLHttpRequest();
    var id = $(this).attr('data-id');
    var txtarea = $(this).parent().child('textarea[name=review]').val();
    xhr3.addEventListener("load", resultsReturnedReview);
    xhr3.open("GET", "reviewadded.php?user_review=" + reviewbox + "&place_id=" + id + "&name=" + txtarea);
    xhr3.send();
}

此外，在您对$ row的其他引用中，请务必引用索引。

Answer 2

以下是使用data- attribute和纯JavaScript的一般示例。

'<input id="review" type="button" data-id="' . $row[ 'ID' ] . '" value="Submit Review">';

＆＃13;

var btns = document.querySelectorAll( '.review' );

btns.forEach( function ( btn, i, arr ) {

  btn.addEventListener( 'click', function ( e ) {
    alert( 'ID: ' + this.dataset.id );
  } );

} );

＆＃13;

<input class="review" type="button" data-id="123" value="Submit Review">
<br>
<input class="review" type="button" data-id="456" value="Submit Review">

＆＃13;

如果dataset不可用或您想要更多浏览器支持，可以使用getAttribute()：

＆＃13;

var btn = document.querySelector( '#review' );

btn.addEventListener( 'click', function ( e ) {
  alert( 'ID: ' + btn.getAttribute( 'data-id' ) );
} );

＆＃13;

<input id="review" type="button" data-id="123" value="Submit Review">

＆＃13;

FWIW我不会内联事件处理程序。这不是一个适当的关注点分离。通过JS将处理程序附加到元素。

使用javascript读取元素的ID

2 个答案: