PDA

View Full Version : سوال: نمونه کد بارگذاری محتوا داخل آجاکس


maskmr85
سه شنبه 06 اردیبهشت 1390, 19:15 عصر
با سلام و عرض خسته نباشید
من یک وب سایت تقریبا استاتیک دارم تا حالا از فریم برای آپدیت وسط صفه استفاده میکردم.
تازگی نمونه کارهای غول آجکس و جی کؤری رو که دیدم تمایل زیادی پیدا کردم که از فناوری های جدید برای آپدیت قسمتی از سایتم استفاده کنم.
من تو فریم از ست فریم برای پرش قسمت به صفحه مورد نظر استفاده میکردم تو آجاکس یا کؤری چطوره؟
اگه میشه یه نمونه کد یا فایل باز خوانی قسمتی از صفحه با کمک آجاکس یا کؤری رو بزارید استفاده کنیم.ممنون میشم اگه توضیحاتشم بدید




حسین,داداش الان تاپیکو دیدی نگی چقد سوال میپرسم.میخوام پایتو تو تایپ ببرم بالا:لبخند:
hossin.esm
سه شنبه 06 اردیبهشت 1390, 21:26 عصر
سلام
شما هم خسته نباشید.
داداش من خوشحال میشم بتونم کمک کنم یا به سوالت دوستان جواب بدم.
جی کوری چندین تابع برای کار با آژاکس داره
http://api.jquery.com/category/ajax/
و اگر میخواهید قسمتی از سایت را آپدیت کنید از تابع load استفاده کنید.
امکانات بیشتر تابع ajax .تو سایت جی کوری مثال هم هست
مثال تابع load

index.htm


<!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>
<script src="jquery-1.4.2.min.js"></script>

</head>
<body>
<button id="b">ajax load</button>
<div id="result"> </div>
<script>
$("#b").click(function(){

$('#result').load('test.htm');

});
</script>

</body>
</html>


کاری که این کد انجام میده این هست که با کلیک روی دکمه با id برابر b محتوای فایل test.htm را در المنتی که id ان برابر result هست قرار میده.

test.htm


<div style="background:#DDD"> ajax </div>
maskmr85
سه شنبه 06 اردیبهشت 1390, 21:41 عصر
آقا حسین
همچیز حله
فقط این فایل jquery-1.4.2.min.js
رو که داخل صفحه فراخوانی کردید از کجا باید دریافت کنم؟
hossin.esm
سه شنبه 06 اردیبهشت 1390, 21:46 عصر
همون کتابخونه jquery هست که قبلا از اون استفاده کردید.
و برای دریافت جدیدترین ورژن به همون سایت http://jquery.com/ مراجعه کنید.
maskmr85
سه شنبه 06 اردیبهشت 1390, 22:14 عصر
این کد رو بر روی هایپر لینک چطور جایگزاری کنیم؟
<A id="b" href="domain.com">txt</A>
یا
<A href="id="b"">txt</A>
------------------------------------------------------------------------------------------------------------------------
بعد این کداتو تو یه اچ تی ام ال گذاشتم کامل جواب داد
ولی وقتی بردم تو تم دیگه "دیو ریزالت"پاسخ نمیداد.میگم نکنه دوباره مثل جریان قبل فایل های جی اس تابع هاشون مثل همه؟؟؟؟؟
------------------------------------------------------------------------------------------------------------------------
اچ تی ام ال خام تو قایر فاکس و اپرا جواب میده ولی تو اکسپلوره هیچ........
hossin.esm
سه شنبه 06 اردیبهشت 1390, 22:36 عصر
این کد رو بر روی هایپر لینک چطور جایگزاری کنیم؟
<A id="b" href="domain.com">txt</A>
یا
<A href="id="b"">txt</A>
------------------------------------------------------------------------------------------------------------------------


برای لینک کد return false; را به click لینک اضافه کنید این کار باعث میشه لینک خنثی بشه.

$("#b").click(function(){

$('#result').load('test.htm');
return false;
});





بعد این کداتو تو یه اچ تی ام ال گذاشتم کامل جواب داد
ولی وقتی بردم تو تم دیگه "دیو ریزالت"پاسخ نمیداد.میگم نکنه دوباره مثل جریان قبل فایل های جی اس تابع هاشون مثل همه؟؟؟؟؟
------------------------------------------------------------------------------------------------------------------------

اگر از کتابخونه دیگه استفاده میکنید ممکن هست.
در ضمن کد ها جی کوری را داخل کد زیر قرار دهید ببینید مشکل حل میشه

$(document).ready(function() {
});



مثل زیر

$(document).ready(function() {
$("#b").click(function(){

$('#result').load('test.htm');
return false;
});
});




اچ تی ام ال خام تو قایر فاکس و اپرا جواب میده ولی تو اکسپلوره هیچ........

اگر روی هاست اجرا کنید فکر کنم با IE هم جواب بده.
maskmr85
سه شنبه 06 اردیبهشت 1390, 23:29 عصر
همچی حله حله فقط یه چیزی هست اینه که دقیقا مثل تاپیک "اسلایدر عکس"شده
و همونطور که گفتم و در نتیجه شما فایل home.js درست کردید و اسلایدر به کار افتاد شده
(یعنی باید یا این لود جی کؤری باشه یا گالری عکس)
من فایل jquery.js رو میزارم خواهشن شما همون کاریو که برا home.jsکردید برا اینم بکنید
که من با یه نام غیر مشابه فراخوانی شده , فراخوانیش کنم فکر کنم درست بشهههههههه(یعنییی امیدوارمم)

- - - - - - - - - - - - - - - - - -- - - - - -
راجب هایپر لینکم منظورم اینه که چطور میتونم با هایپرلینک کاریو که باتون میکنه بکنم!!!
یعنی کاربر بعد از کلیک روی متن هایپر لینک شده کادر ریزالت رو بروز کنه؟؟؟؟؟؟؟؟؟


:اشتباه::اشتباه::اشتباه::اشت اه:خسته شدم چرا انقد اذیت میکنههههههههههههههههههههه هه این:ناراحت::ناراحت::ناراحت:: اراحت:
hossin.esm
سه شنبه 06 اردیبهشت 1390, 23:45 عصر
نیاز به تغییر فایل jquery نیست.
فکر کنم اگر این کد ها را جایگزین قبلی ها بکنید مشکل حل بشه.
در رابطه هایپر لینک هم اگر همون کاری که کفتم انجام بدید مثل باتون عمل میکنه. که توی کد زیر هم هست.




<!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>
<script src="jquery-1.4.2.min.js"></script>

</head>
<body>
<a href="domain.com" id="b">ajax load</a>
<div id="result"> </div>
<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
$("#b").click(function(){

$('#result').load('test.htm');
return false;
});
});

</script>

</body>
</html>
maskmr85
چهارشنبه 07 اردیبهشت 1390, 00:27 صبح
حسین جان ممنون از کمکایه بی دریغت
همه چیز درست همونجور که میخواستم درست شد
----------------
برای تعریف هر صفحه به اسکریپت باید این خط هارو (به استثنا لینک صفحه و آی دی) تکرار کرد؟


<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
$("#b").click(function(){

$('#result').load('test.htm');
return false;
});
});
</script>

این باعث افزونگی نمیشه؟
-------------------------------------
من تو تمپلیتم که چند روزه دارم روش کار میکنم 3باز از جی کؤری استفاده استفاده کردم
و دوبار یک فایل کتابخانه کؤری را (یک کتابخونرو کپی پیست کردم و رینیم)که حجمش 65کیلو بایت
بود صدا کردم و این سرعت لود صفحه ایندکس رو رو هاست فکر کنم خیلییییییییییی بیاره پایین
چاره ای نداری؟
hossin.esm
چهارشنبه 07 اردیبهشت 1390, 00:40 صبح
خواهش میکنم داداش.
میتونید کد های جی کوری را داخل

<script>
jQuery.noConflict();
jQuery(document).ready(function($) {

});
</script>

قرار بدید و در صفحاتی که نیاز هست قرار دهید.
در رابطه با کتابخونه هم فقط یک فایل از اون را در صفحه فراخوانی کنید . و از ان استفاده کنید.
و درمورد سرعت لودصفحه از هاست هم سرعت را پایین میاره ولی نه خیلییییییی
اگر درست متوجه شده باشم . تنها چاره ای که هست از جی کوری استفاده نکنید و از جاوااسکریپت استفاده کنید
maskmr85
چهارشنبه 07 اردیبهشت 1390, 14:07 عصر
با سلام مجدد
آقا من کل فایلارو همونطور که میخواستم چیدم و کار بدون هیچ مشکلی درست شد
فقط میخوام بدوم برای خالی کردن ریزالت چکار باید کنم؟(همونطور که میدونی در اول اجرا کد ریزالت خالیه)
مثلا میخوام با کلیک روی یه لینک ریزالت خالی بشه(کادر پاسخ ریزالت مانند اول لود صفحه خالی باشه)
-------------------------------------
توی test.htm که داخل ریزالت قرار داره چطور میتونم کادر ریزالت رو تغییر بدم؟(از داخل test.htm به 2test.htm جهش داده بشه )
hossin.esm
چهارشنبه 07 اردیبهشت 1390, 15:40 عصر
سلام
در رابطه با خالی کردن کد را اضافه کردم.


<!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>
<script src="jquery-1.4.2.min.js"></script>

</head>
<body>
<a href="domain.com" id="b">ajax load</a><br />
<a href="javascript:void(0)" id="c">clear</a>
<div id="result"> </div>
<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
$("#b").click(function(){

$('#result').load('test.htm');
return false;
});
$("#c").click(function(){

$('#result').html("");

});
});

</script>

</body>
</html>


برای جهش از test.htm به test2.htm با جاوا اسکریپت از کد زیر استفاده کنید

<script>window.location.href="test2.htm"</script>

ولی فکر نکنم نیاز به این کار باشه.
maskmr85
چهارشنبه 07 اردیبهشت 1390, 17:49 عصر
داداش در مورد سوال دوم متوجه نمیشم میشه یه توضیح مختصری بدید
من کاری که میخوام انجام بشه رو رو عکس توضیح دادم .لطفا یه بررسی کن
پیوست شد
hossin.esm
چهارشنبه 07 اردیبهشت 1390, 18:15 عصر
<script>window.location.href="test2.htm"</script>

داداش اصلا من بد متوجه شده بودم و کد بالا غلط هست.

کد
index.htm


<!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>
<script src="jquery-1.4.2.min.js"></script>

</head>
<body>
<a href="domain.com" id="b">ajax load</a><br />
<a href="javascript:void(0)" id="c">clear</a>
<div id="result" > </div>
<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
$("#b").click(function(){

$('#result').load('test.htm');
return false;
});
$("#c").click(function(){

$('#result').html("");

});


});
function test2()
{
jQuery('#result').load('test2.htm');
}
</script>

</body>
</html>



test.htm


<div style="background:#DDD"> test
<br />
<a href="javascript:void(0)" onclick="test2()" id="test2">test2</a>
</div>





test2.htm


<div style="background:#000;color:#fff" > test2 </div>
maskmr85
سه شنبه 22 آذر 1390, 15:36 عصر
آقا حسین که با هم این بحثو تا اینجا رسوندیم به سلامتی خدمت تشریف بردن.خواهش میکنم کسی میتونه کمک کنه...
اگه بخواییم لودینگ بدیم به صفحات ایجکس یه کدی میتونید معرفی کنید.
کد های لودینگ که جواب ندادن
میشه صفحه ایجکسی که داره اود میشه سیاه بشه و یه gif لودینگ بیاد مثل کلوب داشته باشیم.
میشه کاری کرد؟
hossin.esm
دوشنبه 07 فروردین 1391, 15:10 عصر
سلام
سال نو مبارک
یک لودینگ ساده
البته با اجرا روی کلاینت به خاطر سرعت بالا لودینگ مشخص نیست ولی روی هاست لودینگ نمایش داده میشه




<!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>
<script src="jquery-1.4.2.min.js"></script>

</head>
<body>
<a href="domain.com" id="b">ajax load</a><br />
<a href="javascript:void(0)" id="c">clear</a>
<div id="result" > </div>
<script>




jQuery.noConflict();
jQuery(document).ready(function($) {
$("#b").click(function(){

$('#result').html('<p><img src="load.gif" width="220" height="19" /></p>');

$('#result').load('test.htm');


return false;
});
$("#c").click(function(){

$('#result').html("");

});


});
function test2()
{
jQuery('#result').load('test2.htm');
}







</script>

</body>
</html>


این هم تصویر

84697

http://barnamenevis.org/images/misc/pencil.png