1. 程式人生 > >ajax 點選文字傳送資料至後臺或產生效果

ajax 點選文字傳送資料至後臺或產生效果

  • 產生效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>無標題文件</title>
<script type="text/javascript">
window.onload = function() {
var Obtn = document.getElementsByTagName('a');
console.log(Obtn);
var i = 0;
for(i = 0; i < Obtn.length; i++) {
Obtn[i].onclick = function() {
alert('a');
};
}
}
</script>
</head>


<body>
<a>按鈕1</a>
<a>按鈕2</a>
</body>


</html>
  • 傳送資料

(表格)文字內容:

<tr>
<td><a id="<?php echo $datalist[$i][0];?>">
<?php echo $datalist[$i][0];?></a>
</td>
<td>
<?php echo $datalist[$i][1];?>
</td>
<td>
<?php echo $datalist[$i][2];?>
</td>
<td>
<?php echo $datalist[$i][3];?>
</td>
</tr>

window.onload = function(){
          var obj_lis = document.getElementsByTagName('a');
          console.log(obj_lis);
          var i = 0;
for(i = 0; i < obj_lis.length; i++) {
obj_lis[i].onclick = function() {
          alert($(this).attr('id'));
        $.ajax({
url: '*****.php',//該檔案獲取所傳輸的資料值
dataType: 'text',
data: { ****
:$(this).attr('id')},//****傳送至後端時值為$_POST['****']
type: 'POST',
success: function(data) {
alert(data);
//window.location.href='*****.php';//該檔案進行後臺操作
//alert("*****");
},
error: function(jqXHR, textStatus, errorThrown) {
//彈出jqXHR物件的資訊
if(jqXHR.responseText !=""){
alert(jqXHR.responseText);
}

if(jqXHR.readyState != "4"){
alert("請求發生錯誤,錯誤程式碼:"+jqXHR.readyState);
}
alert(jqXHR.status+":" + jqXHR.statusText+";textStatus:"+textStatus+";errorThrown:"+errorThrown);
//alert(jqXHR.readyState);
}
});