Question

我正在学习使用Jquery，我能够从servlet中的db中获取数据，然后将json数组发送到我的ajax函数。现在在我的ajax函数中，我能够提取值，我的目标是将数据添加到我的标签内的href标签。现在，我对某些事情感到有些困惑 - 我想动态创建href链接并将我的ajax中的值附加到href链接。我该怎么做呢？

＆＃13;

$(document).on("click", "#check", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
  //event.preventDefault();
  $.ajax({
    type: "GET",
    url: "HomeServlet",
    success: function(data) {
      console.log(data);
      $.each(data, function(key, value) {
        console.log(value.value1); //alerting the values set in the JSONObject of the Sevlet.
        console.log(value.value2);
      })


    },
    //dataType: "json",
    contentType: "application/json"
  });
  return false;
});

＆＃13;

.vertical-menu {
  width: 200px;
}

.vertical-menu a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}

.vertical-menu a:hover {
  background-color: #ccc;
}

.vertical-menu a.active {
  background-color: #4CAF50;
  color: white;
}

＆＃13;

<form>
  <div class="vertical-menu">
    <a href="#" class="active">Home</a>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </div>
  API Name:<br>
  <input type="text" id="apiname" name="apiname"> API ENDPOINT:<br>
  <input type="text" id="apiendpoint" name="apiendpoint">
  <br> API VERSION:<br>
  <input type="text" id="apiversion" name="apiversion"> ACCESSIBLE:
  <br>
  <input type="checkbox" name="source" value="internet"> Internet<br>
  <input type="checkbox" name="source" value="vpn"> VPN<br>
  <!-- 
  <br><br>
  <input type="submit" formaction="Home" method="post" value="Submit"> -->
  <br>
  <input type="submit" id="check" name="check" value="Check">

</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

＆＃13;

Answer 1

您可以使用基本上添加到当前值的+=。 E.g。

var one = 'string one',
    two = 'string two';

one += ' is better than ';

console.log(one); //this will return string one is better than.

使用+=获取当前值，然后添加指定的内容。因此，在您的情况下，假设您的数据返回如下所示：

var array = ['string', 'one', 'string', 'two'],
    myStr = '';

array.each(function(i, v)
{
    myStr += v;
})

console.log(myStr) // will return stringonestringtwo

希望这是有道理的：）

Answer 2

所以这样做的最好方法就是创建一个div并给它一个你想要附加代码的id，然后在jquery中访问它的对象。例如：

HTML

    <div id="idtoappendto" class="container"></div>

Javascript - Jquery

     $('#idtoappendto').html = `<a href="#data">Generated Html</a>`;

Answer 3

$(document).on("click", "#check", function() { // When HTML DOM "click" 
event is invoked on element with ID "somebutton", execute the following 
function...
//event.preventDefault();
  $.ajax({
     type: "GET",
     url: "HomeServlet",
     success: function(data) {
     console.log(data);
      $.each(data, function(key, value) {
        $(".vertical-menu").append("<a href='#"+value.value1+"'>"+value.value2+"</a>")
  })


},
//dataType: "json",
contentType: "application/json"
 });
return false;
});

Answer 4

您可以使用解决方案https://jsfiddle.net/o2j5q880/

$(document).on("click", "#check", function() { // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
  //event.preventDefault();
  $.ajax({
    type: "GET",
    url: "HomeServlet",
    success: function(data) {
      console.log(data);
      $.each(data, function(key, value) {
        console.log(value.value1); //alerting the values set in the JSONObject of the Sevlet.
        console.log(value.value2);
      })


    },
    //dataType: "json",
    contentType: "application/json"
  });
  return false;
});

// -------- Example code ---------------
var data = [{
	value1: "http://www.google.com",
  value2: "Google"
},{
	value1: "http://www.yahoo.com",
  value2: "Yahoo"
},{
	value1: "https://jsfiddle.net",
  value2: "JSFiddle"
},{
	value1: "https://stackoverflow.com",
  value2: "Stackoverflow"
},{
	value1: "https://codepen.io/",
  value2: "CodePen"
}];

var verticalMenu = $(".vertical-menu").children();
$.each(data, function(key, value) {
  $(verticalMenu[key]).attr('href', value.value1).text(value.value2);
});

.vertical-menu {
  width: 200px;
}

.vertical-menu a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}

.vertical-menu a:hover {
  background-color: #ccc;
}

.vertical-menu a.active {
  background-color: #4CAF50;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="vertical-menu">
    <a href="#" class="active">Home</a>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </div>
  API Name:<br>
  <input type="text" id="apiname" name="apiname"> API ENDPOINT:<br>
  <input type="text" id="apiendpoint" name="apiendpoint">
  <br> API VERSION:<br>
  <input type="text" id="apiversion" name="apiversion"> ACCESSIBLE:
  <br>
  <input type="checkbox" name="source" value="internet"> Internet<br>
  <input type="checkbox" name="source" value="vpn"> VPN<br>
  <!-- 
  <br><br>
  <input type="submit" formaction="Home" method="post" value="Submit"> -->
  <br>
  <input type="submit" id="check" name="check" value="Check">

</form>

我在示例代码中编写了额外的代码部分说明：

使用了样本数据
循环访问数据＆amp;更新了当前链接（而不是附加）
示例代码正在执行onLoad

Answer 5

像这样：

data.forEach(function(i){
   $('.vertical-menu a').attr('href',i);
}

使用Jquery附加到href标签？

5 个答案: