|
 |
| |
สอบถามเรื่อ ajax และ jQuery ใน java script หน่อยครับติดปัญหา |
| |
 |
|
|
 |
 |
|
นี่เป็นตัวอย่างการใช้ ajax และ XMLHttpRequest ซึ่งเป็นโค๊ดรุ่นเก่าแต่ยังใช้ได้
โดย ไม่ต้องใช้ jquery ที่จะต้อง เปลือง bandwidth อีกมากในการ โหลอด
แต่ถ้าคุณมี jquery อยู่แล้ว ก็ลองเปลี่ยนฟังกชั่น ใน new_ajax ดูครับ
index.html
Code (PHP)
<!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>Untitled Document</title>
</head>
<body>
<script language="javascript" type="text/javascript">
///////////////////////////////////////////////////////////////////////////
/////// Below is Function to recieve result from function ale_1(idx).
///////////////////////////////////////////////////////////////////////////
var http = Array();
function new_ajax(url, param, ele, callback){
var j='x_'+http.length;
http[j]='a';
if(window.XMLHttpRequest){ //IE7, Mozilla ,Firefox
http[j] = new XMLHttpRequest();
}else if(window.ActiveXObject){ //IE6?IE5
try{ http[j] = new ActiveXObject( "Msxml2.XMLHTTP ");} catch (e){ ; }
if( http[j] == null) try { http[j] = new ActiveXObject( "Microsoft.XMLHTTP ");} catch (e){; }
}else{
alert('not found HttpRequtest'); return false;
}
try {
http[j].open("POST", url, false);
} catch (e) { alert( "2: Error http.open: \nurl="+url+"\n\n" + e + "\n\n"+ "Click OK to continue.\n\n"); return false; }
var param_len = param.length;
http[j].setRequestHeader("Method", "POST "+url+' HTTP/1.1');
http[j].setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http[j].send(param);
if(http[j].readyState == 4)
if(http[j].status == 200) {
var txt=http[j].responseText;
if(callback !== null) callback.request_ok(txt, ele);
}
http[j] = null;
return true;
}
var js_job={
request_ok: function (rs, ele){
if(ele=='test') { this.result(rs); } else
if (ele!='no_alert') alert('43||'+rs);
},
sendAjax: function(url, param){
new_ajax(url, param, 'test', js_job)
},
result:function(rs){
var data=this.explode('|', rs);
add2Table(data);
},
explode: function(delimiter, ele) {
tempArray=new Array(1);
var count=0, z, ix;
var tmp_Str=new String(ele.trim());
while ((ix=tmp_Str.indexOf(delimiter))>-1) {
z=ix==0? '' : tmp_Str.substr(0,ix).trim();
if(z.length) { tempArray[count]=z; count++;}
//tmp_Str=tmp_Str.substr( ix+delimiter.length);
tmp_Str=tmp_Str.substr( ix+delimiter.length, tmp_Str.length-(ix+delimiter.length)+1 );
}
tempArray[count]=tmp_Str;
return tempArray;
}, ///////////////////////////////////////////////////////////
test: ''
}
/////////////////////////////////////////////////////////////////////*/
function getJob(){
var param=document.getElementById('select_job').value;
if(confirm('ajax.php'+'?'+'testAjax='+param))
js_job.sendAjax('ajax.php', 'testAjax='+param);
}
function add2Table(rs){
var tb=document.getElementById('testTB');
var ro = tb.insertRow(tb.rows.length);
ro.insertCell(0).innerHTML=rs[0];
ro.insertCell(1).innerHTML=rs[1];
}
</script>
<table><tr>
<td>
<select id="select_job" >
<option value="getYourJob1">getYourJob1</option>
<option value="getYourJob2">getYourJob2</option>
</select></td>
<td><input type="button" value="get data" onclick="getJob()" /></td>
</tr></table>
<table border="1" id="testTB">
<tr><th>Item</th><th>Description</th></tr>
</table>
</body>
</html>
ajax.php
Code (PHP)
<?php
define('delimeter', '|');
//include('connectYourDB.php');
if(isset($_REQUEST['testAjax'])){
switch($_REQUEST['testAjax']){
case 'getYourJob1':
echo 'field1', delimeter, 'field2';
break;
case 'getYourJob2':
echo 'field3', delimeter, 'field4';
break;
}
}
?>
ตัวอย่าง ajax ของ jquery
Code (JavaScript)
$.ajax({
}).done(function(msg){
})
|
 |
 |
 |
 |
| Date :
2014-09-08 10:58:42 |
By :
Chaidhanan |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ขอบคุณครับ เดียวผมจะลองดูก่อนนะครับ ว่าจะดัดแปลงได้ยังไงบ้าง
เพราะผมมีไฟล์ php ที่มีการเรียก API ออกมาแสดงข้อมูลแล้ว แต่จะใช้ ajax ในการ load ข้อมูลนั้นออกมาแสดงอะครับ เมื่อชี้ตาม เมนูที่เราต้องการ
|
| |
|
|
| |
| Date :
2014-09-08 14:02:11 |
By :
topman |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
