Magia indubitabilă a JavaScript-ului

Ce e nevoie pentru a a evita form submit.

Obiectul XMLHttpRequest

Documentație
function opereaza(valoare) {
	var cerere = new XMLHttpRequest();
	cerere.onreadystatechange = function() {
	    if (this.readyState == 4 && this.status == 200) {
	       // Când totul e ok se poate opera cu cerere.responseText
	    }
	};
	cerere.open("GET", "back-end.php?parametru="+valoare, true);
	cerere.send();
}

PHP

$url="http://adresa:port/cale";
$ch=curl_init();
$timeout=5;

curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
curl_setopt($ch, CURLOPT_FRESH_CONNECT, TRUE);
$result=curl_exec($ch);
curl_close($ch);
echo $result;

Obiectul FormData

Documentație
function opereaza(valoare1,valoare2,valoare3,fileInputElement) {
	var formData = new FormData();
		//numerele sunt convertite automat la șiruri.
	formData.append("parametru1", $valoare1);
	formData.append("parametru2", $valoare2); 
	formData.append("parametru3", $valoare3);
		
		// Se pot adăuga și fișiere 
	formData.append("fisier1", fileInputElement.files[0]);
	
	var cerere = new XMLHttpRequest();
	cerere.onreadystatechange = function() {
	    if (this.readyState == 4 && this.status == 200) {
	       // Când totul e ok se poate opera cu cerere.responseText
	    }
	};
	cerere.open("POST", "back-end.php");
	cerere.send(formData);
}

PHP

$url="http://adresa:port/cale";
$ch=curl_init();
$timeout=5;

curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
curl_setopt($ch, CURLOPT_FRESH_CONNECT, TRUE);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, array('parametru1'=>'valoare1','parametru2'=>'valoare2'));

$result=curl_exec($ch);
curl_close($ch);
echo $result;

Dacă trimiți un json

curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type:application/json'));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

Web Worker

Documentație

În pagina principală

if (window.Worker) {
	const myWorker = new Worker("javascript.js");
	myWorker.onmessage = function(e) {
		//faci ce vrei cu e.data
	}
} else {
	console.log('Browserul tău nu știe web workers.')
}

in javascript.js

onmessage = function(e) {
	//obții un rezultat ...
	//dacă vrei să stie pagina principală....
    postMessage(rezultat);
}

SELECŢIE MULTIPLĂ

<input type=checkbox name=$i id='r_$i'> // ce se va selecta <td $style id=i_$i class='ms'> // casuta pe care fac click var a=0; var x=document.getElementsByClassName('ms'); for (var i=0;i<x.length;i++) { x[i].onclick=function() { var temp=this.id.split('_'); if(a==0) { a=parseInt(temp[1],10); this.style.backgroundColor='orange'; } else { b=parseInt(temp[1],10); document.getElementById('i_'+a).style.backgroundColor='white'; if(a<b) { for(i=a;i<=b;i++) { if(document.getElementById('r_'+i).checked) { document.getElementById('r_'+i).checked = false; } else { document.getElementById('r_'+i).checked = true; } } } else { for(i=b;i<=a;i++) { if(document.getElementById('r_'+i).checked) { document.getElementById('r_'+i).checked = false; } else { document.getElementById('r_'+i).checked = true; } } } a=0; } } }

Pentru afisarea tuturor atributelor unei clase

var elm = document.getElementById(id); var attr = elm.attributes; var resp =''; for(var i=0; i<attr.length; i++) resp += attr[i].name +' = '+ attr[i].value +'<br>'; alert(resp);

Drag and drop HTML5

<style type="text/css"> #div1, #div2 { float: left; width: 19em; min-height: 90px; margin: .2em; border: 2px solid #000; padding: .2em; } .todrag { cursor: pointer; } .dragging { border: 1px dashed #00f; background: #ff1; } </style> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="dragStart(event)" id="drag2" class="todrag" style='width:274px;height:200px;'>TEXT care poate preluat si mutat</span> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br style="clear:both" /> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function dragStart(ev) { ev.dataTransfer.setData('Text', ev.target.id); ev.target.className = 'dragging'; } function drop(ev) { ev.preventDefault(); var drag_data = ev.dataTransfer.getData('Text'); ev.target.appendChild(document.getElementById(drag_data)); document.getElementById(drag_data).className = 'todrag'; } </script>

Copiere prin click

function copiaza(care) { let element = document.getElementById('care'+care); //select the element let elementText = element.textContent; //get the text content from the element copyText(elementText); //use the copyText function below } function copyText(text) { navigator.clipboard.writeText(text); }
Politica de confidențialitate Politica privind cookie-urile Termeni și condiții de utilizare
2014-2022 Marce.ro Toate drepturile rezervate.