कैसे सुंदर ढंग से अजाक्स अनुरोध के जवाब में JSON वस्तुओं को संचालन करने के लिए?

वोट
4

मैं वास्तव में मेरे अजाक्स अनुरोध और प्रतिक्रिया चक्र को संभालने के लिए JSON का उपयोग कर के लिए नया हूँ। मैं पहले सिर्फ सादे पुराने पोस्ट डेटा के रूप में पारित कर दिया मापदंडों का उपयोग किया है और मैं प्रतिक्रिया जो तब डोम में रखा गया था में सीधे एचटीएमएल प्रदान की गई है। मैं विभिन्न उदाहरणों को देखा और विभिन्न ट्यूटोरियल के माध्यम से पढ़ा है, यह एक बहुत ही आम अभ्यास की तरह लगता है बस JSON ऑब्जेक्ट एचटीएमएल के साथ मिश्रित है कि कठिन स्ट्रिंग में कोडित किया गया है और फिर कुछ तत्व को innerHTML के रूप में स्ट्रिंग आवंटित से एक स्ट्रिंग के निर्माण के लिए ।

एक सामान्य उदाहरण इस तरह दिखता है:

var jo = eval(req.responseText);

var strTxt = '<span>' + jo.f_name + ' ' + jo.l_name + '</span><br/>' + 'Your Age Is: ' + jo.age + '<br/>'; 

$('myDiv').innerHTML = strTxt;

वहाँ JSON प्रतिक्रिया से निपटने ताकि मैं कठिन जावास्क्रिप्ट में HTML कोडिंग नहीं कर रहा हूँ का एक और अधिक सुंदर (या सही) रास्ता नहीं है? या यह काफी कैसे लोगों को यह करना है?

ट्यूटोरियल या अन्य स्रोतों के पी एस लिंक की सराहना कर रहे हैं।

14/02/2009 को 16:31
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


4 जवाब

वोट
2

तुम बस DIV के innerHTML, निम्नलिखित (untested) की तरह कुछ में उन्हें छोड़ने के बजाय जावास्क्रिप्ट का उपयोग कर डोम में तत्वों बना सकते हैं:

var mySpan = document.createElement("span");
var spanContent = document.createTextNode(jo.f_name + ' ' + jo.l_name);
mySpan.appendChild(spanContent);
var myBr = document.createElement("br");
mySpan.appendChild(myBr);
var otherSpanContent = document.createTextNode('Your Age Is: ' + jo.age);
mySpan.appendChild(otherSpanContent);
mySpan.appendChild(myBr);

$('myDiv').appendChild(mySpan);
14/02/2009 को 16:40
का स्रोत उपयोगकर्ता

वोट
1

मैं जावास्क्रिप्ट तार के भीतर एचटीएमएल का एक बहुत लेखन से दूर चलाने की है। मैं डेटा हेरफेर से संरचना की जुदाई पसंद करते हैं। बेहतर विकल्प / पेज में है कि कोड डालने की, आईडी के आधार पर मूल्यों, और शो लोड इसे छिपाने यदि आवश्यक है:

<div id="codeBlock" style="visible=false;">
<span id="val1"></span>
<br/>
<span id="val2"></span>
<br/>
</div>
............
<script>
var jo = eval(req.responseText);
$('val1').innerHTML = jo.f_name + ' ' + jo.l_name;
$('val2').innerHTML = 'Your Age Is: ' + jo.age;
$('codeBlock').show();
</script>

यही नहीं हो सकता है कि आप क्या करना चाहते हैं, लेकिन आप विचार मिलता है।

14/02/2009 को 16:50
का स्रोत उपयोगकर्ता

वोट
2

आप इस तरह के रूप में एक templating इंजन की जाँच कर सकता है शुद्ध - पहली बार में में प्राप्त करने के लिए एक सा मुश्किल हो सकता है, लेकिन यह (और DOMAssistant जो अच्छा है) कई प्रमुख जावास्क्रिप्ट चौखटे का समर्थन करता है और डेटा से एचटीएमएल अलग करती है।

14/02/2009 को 16:53
का स्रोत उपयोगकर्ता

वोट
1

JSON से बनाए गए वस्तुओं मानक जावास्क्रिप्ट वस्तुओं रहे हैं, इसलिए आप आसानी से तत्वों को बनाने या उपयोग डोम और अपने JSON ऑब्जेक्ट से सामग्री डालने के लिए jQuery चयनकर्ताओं का उपयोग कर सकते हैं।

जैसे।

// Create a new span element and set its text
var personSpan=$("<span>").text(jo.f_name + ' ' + jo.l_name);

// Append the span to the existing myDiv element
$("myDiv").append(personSpan);

// Create a new div element (better then br) and set its text
var personDiv=$("<div>").text("Your Age Is: " + jo.age);

// Append the new div to the existing myDiv element
$("myDiv").append(personDiv);
14/02/2009 को 16:58
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more