Page Load Without Refresh (Load & AJAX)
Page Load Without Refresh : जब हमे किसी पेज पर किसी Specific Division पर कोई HTML Load करना हो या Page पर से कोई Value कही ओर भेज कर उससे संबंधित Responce को स्क्रीन पर बिना Refresh किए हि दिखाना हो तब Page Load Without Refresh Logic का सहारा ले कर हमे Script लिखना होती हैं , इसके लिए हमे Jquery load ओर ajax का उपयोग करना होता हैं ।
Browser में JQuery को सपोर्ट करने के लिए हमें Script टैग में फाइल ऐड करना होगी, इस फाइल को आप डाउनलोड कर रुट डायरेक्टरी में भी रख सकते हैं, इस फाइल से ब्राउज़र jQuery को सपोर्ट करने लगता हैं । यहा पर हमे एक डिवीज़न बनाया हैं ओर उसे एक ID दी हैं, इस Division पर हम Dynamically Code Add करेंगे ।<HTML>
<HEAD>
<TITLE></TITLE>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">/script>
</HEAD>
<BODY>
<DIV ID="DivID"></DIV>
<input type="button" value="Load" onclick="GetLoad()" />
</BODY>
</HTML>
JQuery Load (as a GET Method)
यदि आपको कोई भी पेज Dynamic अपने Current Page पर लाना हो तो आप JQuery Load का उपयोग कर सकते हैं , इसमे आपको url pass करनी होती हैं url के साथ मे आप Parameter भी Pass कर सकते हैं
<script>
function GetLoad()
{
var ls_1 = $('#txt_1').val();
var ls_2 = $('#txt_2').val();
var ls_page = 'PageName.php?param1=' + ls_1 + '¶m2=' + ls_2 ;
$("#DivID").load(ls_page,
function(){
//when Success
}
);
}
</script>Using AJAX (as a POST Method)
जब हमे data Dynamic लाना हो ओर जिस Page से data लाना हो वह post method से लिखा हो तो हमे $.ajax का उपयोग करना होता हैं , ऐसा करने से हम किसी भी Division या जहा पर भी हम value लेना चाहते हैं वहा पर इसका उपयोग कर सकते हैं ।
POST के स्थान पर GET लिख कर भी Request भेज सकते हैं ।
यदि हमने कोई Form बना रखा हैं तो हम formData मे Direct वैल्यू भी दे सकते हैं (अभी हमने उसे कमेन्ट किया हैं)
function GetLoad()
{
var a1 = 10;
var a2 = 20;
// var formData = $('#FrmLogin').serialize() //Read Value From Form
var formData = {q:a1, o1:a2}; //Parameter for POST
$.ajax({
url : URL,
type: "POST",
data : formData,
success: function(data, textStatus, jqXHR)
{
$("#DivID").html(data);
},
error: function (jqXHR, textStatus, errorThrown)
{
//Error Message
}
});
}Ajax Parameters
- url : यहा पर हम कोई भी url जिसे की Page पर दिखाना चाहते हैं या execute कर उसका Result show करना चाहते हैं उसे लिखते हैं।
- type : यह पर हमे Method लिखना होती हैं की हम GET का उपयोग कर रहे हैं या POST का (Method के बारे मे जानने के लिए क्लिक करे )
- data : यहा पर हमे { } Curly Braces मे data भेजना होता हैं , आप Manual भी pass कर सकते है या आप Serialize का उपयोग कर भी data भेज सकते हैं ।
- success : जिस भी पेज पर आपने Request भेजी है और वह पूरी तरह से Execute हो जाती हैं तो इस function को अपने आप की Call किया जाता हैं , यह पर data variable मे उस पेज का output आता हैं । आपका उसका अपने कार्य अनुसार उपयोग कर सकते है ।
- error : यदि पेज पर Request जाने मे ज्यादा समय लग रहा हैं या किसी भी अन्य कारण से एक specific समय बाद कोई रिप्लाइ नहीं आता या पेज मे किसी प्रकार की कोई एरर होती हैं तो यह Function Call हो जाता हैं । यहा पर भी आप अपने कार्य अनुसार message दे सकते हैं ।
Refresh a Particular Area
जब भी हमे किसी भी Website और Web Application मे कोई particular area को refresh /load करवाना हो तो हम load ओर ajax का उपयोग कर सकते हैं ।
- जब भी आपको as it इस page डिस्प्ले करना हो ओर उसमे paramter passing get method से हो तो आप load का उपयोग करे ।
- ओर यदि आपको किसी पेज को load कर उसका particular कोई part या return आने पर किसी एक हि वैल्यू को कही पर उपयोग करना हो तो आप ajax का उपयोग कर सकते हैं ।
Use This Concept for MySQL Data (select, Insert, Update, Delete)
आप इस Concept से एक PHP पेज बना कर उस पर MySQL connection कर कोई भी Query Execute कर सकते हैं । ओर साथ मे कोई भी data को display करने के लिए Table form मे data को दिखा सकते हैं ।
Example से समझने के लिए हमने एक आर्टिकल लिखा हैं आप इसे भी Read कर सकते हैं ।
हमारे अन्य आर्टिकल
- Learn C – हिंदी में
- MySQL Aggregate Function in Hindi
- MySQL SYS_EXEC Example With Trigger
- GET & POST Method | Difference Between GET & POST
- PHP Validation | filter_var | preg_match
- Arduino Guide 2021 (Hindi)
- कीबोर्ड शॉर्टकट्स
यह आर्टिकल Page Load Without Refresh आपको कैसा लगा हमे comment जरूर करे ,
अपना कीमती समय देने के लिए धन्यवाद ।
This Article Satisfy Following Queries
- Refresh a HTML div without page load AJAX.
- Load Data From Database Without Page Refresh Using AJAX.
- Submit a Form Without Page Refresh Using jQuery.
- Page load without refresh jQuery Code Example.
- Reload page without refresh JavaScript.
- AJAX load content without refresh the whole page.
- Refresh page without reload in jQuery.
- Without refresh page load in PHP.
- Update html without refresh JavaScript.
