Para obtener la data de tus elementos con la clase nav-link
:
const data = {};
const contents = Array.from($(".nav-link")).map(el => {
data[$(el).attr("aria-controls")] = $(el).text();
return data;
});
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...1</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...2</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...3</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...4</div>
</div>
Lo que he hecho aquí:
const data = {};
const contents = Array.from($(".nav-link")).map(el => {
data[$(el).attr("aria-controls")] = $(el).text();
return data;
});
console.log(data);
Es crear un objeto data
que será rellenado pasandole como clave el valor que contenga cada atributo "aria-controls"
en cada nav-link
que tengas, y como valor el contenido de texto de cada nav-link
si deseas añadir mas propiedades quitar algunas o no era exactamente la info que deseabas extraer puedes modificarlo a gusto haciendo uso de mi ejemplo.
Esta data será la que deberás colocar en:
$.ajax({
type: "POST",
url: "./", //La url deberia ser ./
data: data, //Aquí
success: function(data) {
console.log(data.href)
}
De esta forma estarías enviando un JSON
hacia la misma pagina parecido a este por medio de POST
(le cambie el method a POST
):
{
"home": "Home",
"profile": "Profile",
"messages": "Messages",
"settings": "Settings"
}
De todas maneras:
Ten en cuenta que la idea de enviar datos hacia el servidor es para
que te respondan con otros datos distintos, si tu idea es enviar los
datos hacia la misma pagina tu pagina debe encargarse de enviar una
respuesta (para recibir estos datos en ajax) y a la vez ser la
estructura, lo cual no es para nada aconsejable.
Te recomiendo que en vez de enviar datos a la misma pagina simplemente
separes la logica de PHP
a otro archivo aparte, si no estas usando
algo del lado del servidor como PHP
o NodeJS
del lado del servidor
entonces tienes serios problemas.
De todas maneras ten en cuenta que ajax NO recarga la pagina ni te
envia a esta, por lo que aunque tu archivo este aparte siempre
puedes recibir una respuesta en el mismo archivo en el success
de
ajax.
Si no usas ningún lenguaje del servidor para procesar la data enviada a por ejemplo PHP
o nodejs
no pienses que tu archivo index.html
podra ser usado como receptor de tus datos en ajax
y a la vez como servidor, si tu idea era no tener que aprender algun lenguaje del lado del servidor para realizar estos procesos, deberas si o si aprender aunque sea un lenguaje del lado del servidor.
De lo contrario la data simplemente será rechazada en tu archivo a la hora de enviarla o ajax
dará un error de conexión al servidor.
Esto es diferente si tu archivo tiene extensión .php
la cual ya si seria valida para recibir estas peticiones si corre por ejemplo en un servidor local.
Si no corre en un servidor ya sea local
o no definitivamente el archivo y ajax nunca te van a funcionar para el propósito de recepción y procesamiento de datos.