मैंने इंटरनेट के चारों ओर खोज की है, और एसओ और मुझे इसका उत्तर नहीं मिला है जो मैंने सोचा था कि यह एक साधारण प्रश्न होगा। मैंने अभी-अभी AJAX और JS के साथ जुड़ना शुरू किया है, इसलिए कृपया मुझे क्षमा करें यदि यह वास्तव में गूंगा प्रश्न प्रतीत होता है!

मैं AJAX कॉलबैक में HTML, और एक चर कैसे वापस कर सकता हूं।

मान लें कि मैं सॉर्ट ऑर्डर अपडेट करने के लिए डेटाबेस क्वेरी निष्पादित करना चाहता हूं। मैं AJAX का उपयोग करके अपने फॉर्म से update.php पर सॉर्ट ऑर्डर भेजता हूं। मैं फिर कुछ एचटीएमएल वापस भेजता हूं जैसे

<div class="alert alert-info">
    <strong>Sort Order Updated</strong>
</div>

मैं अपने div में सफलता संदेश प्रदर्शित करता हूं, और फिर मैं कुछ ऐसा उपयोग करना चाहता हूं:

document.getElementById('sortOrderInput')['sortorder'].value = "returnedvariable";

प्रपत्र फ़ील्ड में मान अद्यतन करने के लिए। (नोट: "रिटर्नवेरिएबल" केवल यह दर्शाने के लिए है कि मुझे वह मूल्य कहाँ चाहिए जो $_POST['सॉर्टऑर्डर'] में था)

अगर मैं कंसोल.लॉग (डेटा) करता हूं तो मुझे वर्तमान में एचटीएमएल सामग्री दिखाई देती है, और मैं अपने जीवन के लिए यह नहीं समझ सकता कि मुझे एक चर कैसे वापस करना चाहिए। क्या मैं इसे किसी प्रकार के सरणी के रूप में करता हूं जिसमें डेटा प्रकार दोनों होते हैं और फिर इसे संदर्भित करते हैं?

.done(function(data) {

स्पष्टता के लिए, मैं अपनी पूरी स्क्रिप्ट यहाँ जोड़ रहा हूँ

$(document).ready(function() {
        var original_content = '';
        $('.sortOrder').submit(function(e){
            e.preventDefault();
            $.ajax({
                url: 'sort_order_update_ajax.php',
                type: 'POST',
                data: $(this).serialize(),
                dataType: 'html'
            })
           .done(function(data) {
               console.log(data);
               var elem = $('.sort-update');
               var original_content_qty = elem.html();
               elem.fadeOut('slow', function() {
                   elem.html(data).fadeIn('slow', function() {
                       elem.delay(1200).fadeOut('slow', function() {
                           elem.html(original_content_qty).fadeIn('slow');
                           //document.getElementById('sortOrderInput')['sortorder'].value = ?????;
                       });
                   });
               });
           })
           .fail(function(){
               alert('Ajax Submit Failed ...'); 
           });
       });
   });

Sort_order_update_ajax.php फ़ाइल में शामिल है

<?php require('includes/application_top.php');

if( $_POST ){
    $sort_order = $_POST['sortorder'];

    $sort_order = (int)$sort_order;
    if (is_int($sort_order)) { 
        $sql = "UPDATE " . TABLE_PRODUCTS . " SET sort_order = '" . $sort_order . "' WHERE products_id ='" . $_POST['products_id']. "'";
        $db->Execute($sql);
    }
?>
<div class="alert alert-info">
    <strong>Sort Order Updated</strong>
</div>

<?php 
}
require(DIR_WS_INCLUDES . 'application_bottom.php'); 
?>
1
Steve Price 27 मार्च 2018, 04:38

3 जवाब

सबसे बढ़िया उत्तर

आपके द्वारा हमें दी गई जानकारी के आधार पर, मैं कुछ इस तरह का उत्तर दूंगा:

सर्वरसाइड (PHP मानकर)

<?PHP
$data = array(
    'sortOrder' => $_POST['sortorder'],
    'asHtml' => '<div class="alert alert-info"><strong>Sort Order Updated</strong></div>',
);
header('Content-Type: application/json');
echo json_encode($data);

ग्राहक पक्ष (जावास्क्रिप्ट मानकर)

.done(function(data) {
  // show your confirmation div like before
  document.getElementById('confirmation').value = data.asHtml;
  document.getElementById('sortOrderInput')['sortorder'].value = data.sortOrder;
});
2
floverdevel 27 मार्च 2018, 02:04

अगर मैं आपके प्रश्न को सही ढंग से समझता हूं, तो आप इसे डीओएम में इंजेक्ट करने के लिए एक एजेक्स कॉल से पैरेंट स्कोप (संभवतः वैश्विक दायरा) में एक चर वापस करने की कोशिश कर रहे हैं।

इसका पता लगाना आसान नहीं है क्योंकि यह असंभव है (कम से कम भाषा के सामान्य संस्करण में)। AJAX कॉल डेटा वापस नहीं कर सकता क्योंकि यह http अनुरोध को असीमित रूप से संसाधित करता है। आपको या तो अपने DOM इंजेक्शन कोड को .done कॉलबैक के अंदर ले जाना होगा, या (अधिमानतः) DOM इंजेक्शन कोड को आपके .don कॉलबैक से बुलाए गए किसी अन्य फ़ंक्शन में लपेटना होगा।

0
Joshua Miles 27 मार्च 2018, 02:00

ऐसा करने के कई तरीके हैं, लेकिन मेरी राय में सबसे आसान और स्पष्ट होगा: आपकी सेवा (सर्वर एपीआई) से आप इस तरह की वस्तु वापस कर सकते हैं:

{
  sortOrder: <sort order value>,
  message: "Sort Order Updated"
}

फिर, आप इन चरों को response.sortOrder और response.message के रूप में उपयोग कर सकते हैं।

उम्मीद है की यह मदद करेगा! कृपया डाउन वोटिंग के बजाय, यदि आपके कोई प्रश्न हैं, तो टिप्पणियों में लिखें। :)

1
Abhi 27 मार्च 2018, 02:00