使用 JavaScript 根据来自 SharePoint REST API 的点击更改 div html答案

【问题标题】：Change div html based on click from SharePoint REST API with JavaScript使用 JavaScript 根据来自 SharePoint REST API 的点击更改 div html
【发布时间】：2020-08-12 13:52:28
【问题描述】：

这适用于从 SharePoint 列表中提取数据，问题是：如何传递单击的按钮的 this.className（或通过下一步按钮获取列表中第 2 项的某种方式）。我需要从 data.d.results[1] 中提取第二个按钮的数据，依此类推。现在我只是得到错误，因为 classOfButton 没有定义（因为 this.className 没有成功传递：onQuerySucceeded()。

在页面顶部我有两个按钮：

<div id="buttonMaster">
<a class="product01">Product 1</a>
<a class="product02">Product 2</a>
</div>

我正在使用 API 从 SharePoint 2013 列表中提取信息：

const Productbuttons = document.querySelectorAll('#buttonMaster a');
for (const ProductButton of Productbuttons) {
ProductButton.addEventListener('click', function(event) {
getListData(this.className);
})
}

function getListData() {
var fullUrl = _spPageContextInfo.webAbsoluteUrl + /_api/web/lists/getByTitle('TestProductConstruct')/items;
$ajax({
url: fullUrl,
type: "GET";
headers: {
   "accept": "Appplication/json;odata=verbose",
   "content-type": "application/json;odata=verbose",
succes: onQuerySucceeded,
error: onQueryFailed
}
});

function onQuerySucceeded(data) {
 var classOfButton = this.className;
 switch(true) {
 case classOfButton.contains('Product01');
 const product1 = data.d.results[0];
 $('step1Info').html(product1.Phase);
 $('step2Info').html(product1.Step);
 break;
 case classOfButton.contains('Product02');
 const product2 = data.d.results[1];
 $('step1Info').html(product2.Phase);
 $('step2Info').html(product2.Step);
 break;
 }
}

function onQueryFailed() {
alert('Error');
}

谢谢，瑞恩

【问题讨论】：

在监听器中，使用ev.target.className 而不是this。并注意区分大小写---> Product01 vs. product01
谢谢，将事件监听器更新为 ev.target.className 和小写的 Product。仍然给我 classOfButton 未定义。 className 仍未成功传递。

标签： javascript rest sharepoint sharepoint-api

【解决方案1】：

好的，您的代码存在一些问题：

首先，为功能使用数据属性，为样式保留类。如果有人删除或重命名您的课程，您的代码就会损坏。顺便说一下，你可以通过这个传递一些有用的数据
所以switch/case 是不必要的。您可以在onQuerySucceeded() 中使用此数据
我不知道它如何处理您的 ajax 调用。在 jQuery 中，您可以调用 $.ajax() 而不是 $ajax()
fullURL 大小写不正确：fullUrl
我认为fullURL 是无效的。您以不正确的方式将变量与字符串和函数调用组合在一起。您可以改用字符串文字： `${_spPageContextInfo.webAbsoluteUrl}/_api/web/lists/${getByTitle('TestProductConstruct')}/items` 或基本的字符串连接： _spPageContextInfo.webAbsoluteUrl + '/_api/web/lists/' + getByTitle('TestProductConstruct') + '/items'

这是我的最终代码：

<div id="buttonMaster">
  <a class="product" data-product="0">Product 1</a>
  <a class="product" data-product="1">Product 2</a>
</div>

const products = document.querySelectorAll('[data-product]')
products.forEach(product => {
  product.addEventListener('click', (ev) => {
    getListData(ev.target)
  })
})

const getListData = (element) => {
  const fullURL = `${_spPageContextInfo.webAbsoluteUrl}/_api/web/lists/${getByTitle('TestProductConstruct')}/items`

  $.ajax({
    url: fullURL,
    type: "GET",
    headers: {
      "accept": "Appplication/json;odata=verbose",
      "content-type": "application/json;odata=verbose",
    succes: (data) => {
      onQuerySucceeded({ data, element })
    },
    error: onQueryFailed
    }
  })
}

const onQuerySucceeded = ({ data, element }) => {
  const product = data.d.results[element.dataset.product]
  $('.step-1').html(product.Phase)
  $('.step-2').html(product.Step)
}

【讨论】：

这给你 getByTitle 没有定义，如果你回到我的工作地址，它什么也不做，没有错误。这可能包含对 SharePoint 2013 来说太新的项目。

【解决方案2】：

好的，通过反复试验找到了答案。这是我发现并在一天内更改的东西的混合，所以不太漂亮，我会在收到时更新。

const Productbuttons = document.querySelectorAll('#buttonMaster a');
for (const ProductButton of Productbuttons) {
ProductButton.addEventListener('click', function(event) {
var buttonClass = Productbutton.getAttribute('class');
getListData(buttonClass);
})
}

function getListData(buttonClass) {
var fullUrl = _spPageContextInfo.webAbsoluteUrl + /_api/web/lists/getByTitle('TestProductConstruct')/items;
  $ajax({
  url: fullUrl,
  type: "GET";
  headers: {
   "accept": "Appplication/json;odata=verbose",
   "content-type": "application/json;odata=verbose",

  success: function(data) {
  switch(true) {
  case buttonClass === "product01":
  var xid = data.d.results[0];
  $(".step1Info").html(xid.Phase);
  $(".step2Info").html(xid.Step);
  break;
  case buttonClass === "product02":
  var xid = data.d.results[1];
  $(".step1Info").html(xid.Phase);
  $(".step2Info").html(xid.Step);
  break;
   }
  },

  error: onQueryFailed
  }
 },

function onQueryFailed() {
console.log('Error');
}

谢谢，瑞恩

【讨论】：