使用Jquery附加到href标签吗？

Question

I am learning to use Jquery and I am able to fetch data from the db inside a servlet and then send the json array to my ajax function. Now inside my ajax function, I am able to extract the values and my goal is to add the data to my href tags which is inside my tag. Now, I am a bit confused about something- I want to create href link dynamically and append the values from my ajax to the href links. How do I go about it ?

 $(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; }); 

 .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; } 

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

Answer 1

you can use += which essentially adds to the current value. Eg

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

one += ' is better than ';

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

using += takes the current value then add what's specified. So in your case, let's say your data return looks like this:

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

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

console.log(myStr) // will return stringonestringtwo

hope this makes sense :)

Answer 2

So the best way to do this is just make a div and give it an id that you want the code appended too and just access it's object in jquery. Ex:

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

Here you go with the solution 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> 

I have written an extra part of code in Example code Explanation:

• Used a sample data
• Loop through the data & updated the current links (instead of appending)
• Example code is executing onLoad

Answer 5

Like this:

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