स्प्रिंग वेब एमवीसी

Question

में अजाक्स JQuery का उपयोग कैसे करें मैं अपने आवेदन के लिए स्प्रिंग वेब एमवीसी का उपयोग कर रहा हूं।

मैं अपने JSP दृश्य में 1 ड्रॉपडाउन सूची है, निम्नलिखित अनुरोध से आ रही savegroup.htm बुलाया

<bean name="/savegroup.htm" class="com.sufalam.mailserver.presentation.web.GroupSaveController"> 
    <property name="sessionForm" value="true"/> 
    <property name="commandName" value="Group"/> 
    <property name="commandClass" value="com.sufalam.mailserver.presentation.bean.GroupViewBean"/> 
    <property name="formView" value="common"/> 
    <property name="successView" value="managegroup.htm"/> 
    <property name="userSecurityProcessor" ref="IUserSecurityProcessor"/> 
    <property name="domainsSecurityProcessor" ref="IDomainsSecurityProcessor"/> 
    <property name="forwardingsSecurityProcessor" ref="IForwardingsSecurityProcessor"/> 
</bean> 

JSP पृष्ठ है:

<form:form name="groupSaveForm" action="savegroup.htm" commandName="Group" method="POST"> 
    Group Name : 
    <form:input path="source"/><br><br> 
    Domain List : 
    <form:select id="domains" onchange="javascript:getUser();" path="domainsList" multiple="false" size="1"> 
     <form:option value="-" label="--Select--"/> 
     <form:options items="${domainsList}" itemValue="domain" itemLabel="domain"/> 
    </form:select> 
</form:form> 

अब मेरी आवश्यकता है, के परिवर्तन घटना पर मेरे ड्रॉप डाउन सूची, मैं सर्वर से संबंधित उपयोगकर्ताओं को लाने और कुछ सूची बॉक्स में उपयोगकर्ताओं की उस सूची को प्रदर्शित करना चाहता हूं।

इसके लिए मैं jQuery AJAX कॉल का उपयोग कैसे कर सकता हूं?

मुझे सर्वर साइड कोड कहां से संभालना चाहिए जो अनुरोध प्राप्त करता है और संबंधित उपयोगकर्ता को प्राप्त करता है?

मेरे जेएसपी में उपयोगकर्ताओं के आने वाले सेट को कैसे प्रदर्शित किया जाए?

Answer 1

इसे हल करने के कई तरीके हैं। इससे पहले कि मैं आपको ठोस मार्गदर्शन दे सकूं, मुझे सवालों के कुछ जवाब चाहिए।

क्या आपके पास AJAX अनुरोधों के लिए XML बनाम जेएसओएन की प्राथमिकता है? नोट करने के लिए

एक बात - jQuery मुझे क्या करना है आपको बताने के लिए जा रहा हूँ के बारे में विशेष बात नहीं है। आप एक फार्म में jQuery async अनुरोध है कि jQuery (XML या JSON, आदर्श) के लिए उपयोगी है के लिए एक प्रतिक्रिया वापस भेजने की जरूरत है, लेकिन सर्वर साइड पर, यह किसी सामान्य अनुरोध जो एक राय यह है कि एक्सएमएल renders उपयोग करने के लिए होता है की तरह लग रहा या एचटीएमएल के बजाय जेसन। मेरी निजी वरीयता जेएसओएन का उपयोग करना है, खासकर जब वसंत-जेसन पैकेज बहुत अच्छी तरह से काम करता है और यह समझने में आसान होता है कि यह कैसे काम करता है। मैं http://spring-json.sourceforge.net/ से उपलब्ध वसंत-जेसन पैकेज की सिफारिश करता हूं, सभी दस्तावेजों के माध्यम से पढ़ें और आपको यह बहुत अच्छा विचार होना चाहिए कि यह कैसे काम करता है।

कॉन्फ़िगर एक दृश्य जो वसंत-json विचारों के नोए उपयोग करता है:

सबसे बुनियादी रूप में, अपने समाधान निम्न कार्य करने की जरूरत है। मैं ज्यादातर मामलों के लिए sojoView पसंद करते हैं।

सर्वर, जो उपयोगकर्ताओं की सूची वापस आ जाएगी करने के लिए एक async अनुरोध करना। यदि उपयोगकर्ताओं के सेट को वितरित करने के लिए आवश्यक एकमात्र जानकारी ड्रॉप डाउन का चयनित मान है, तो क्वेरी स्ट्रिंग में चयनित डोमेन के साथ एक GET अनुरोध जारी करना बहुत आसान होगा। सर्वर की ओर, आपको एक नियंत्रक की आवश्यकता होती है जिसे आने वाले अनुरोध पर मैप किया जाएगा और जो jquery द्वारा संसाधित होने के लिए जेसन या एक्सएमएल वापस भेज देगा। असल में आप एक पूरी तरह से सामान्य नियंत्रक लिख सकते हैं, भले ही जीईटी या पोस्ट विधि द्वारा एक्सेस किया गया हो, और अपने जेसन व्यू के थर्म नाम को लौटने से पहले मॉडल की अपनी सूची मॉडल में जोड़ें। स्प्रिंग-जेसन द्वारा प्रदान किए जाने वाले 3 प्रकार के जेसन व्यू आपकी सूची में बीन्स को एक जेसन संरचना में प्रस्तुत करेंगे और क्लाइंट को भेजेंगे। आप को पार्स/परिवर्तित भेजे मानकों और किसी भी सत्यापन त्रुटियों json प्रतिक्रिया जो अपने क्लाइंट पक्ष कोड उपयोगकर्ता के लिए पेश कर सकते हैं में क्षेत्र या वैश्विक त्रुटि संदेश उत्पन्न होगा के लिए मानक DataBinder कार्यक्षमता का उपयोग कर सकते हैं।

सामान्य स्थिति में, मेरी कोड कुछ इस तरह दिखेगा (यह सब वसंत 2.5 है। यह एनोटेशन का उपयोग करता है, लेकिन आप अपने अनुप्रयोग के संदर्भ में एक्सएमएल विन्यास के साथ एक ही काम कर सकते हैं।):

@Controller 
public class AjaxController { 

    @RequestMapping("/some/path/selectDomain.json", method=RequestMethod.GET) 
    public ModelAndView processDomainSelection(@RequestParam(value="domain", required="true") String selectedDomain) { 
     List<User> users = service.loadUsersForDomain(selectedDomain); 
     ModelAndView mv = new ModelAndView("sojoView", "users", users); 
     return mv; 
    } 
} 

मैं एक पोस्ट अनुरोध के माध्यम से कार्रवाई करने के लिए चाहते हैं, और मैं domainValue कि प्रस्तुत किया जाता है से एक वास्तविक डोमेन वस्तु लोड करने के लिए चाहते हैं, तो मैं इस

@Controller 
@RequestMapping("/some/path/selectDomain.json") 
public class SelectDomainController { 
    public class FormBean { 
     protected Domain domain; 
     public Domain getDomain() { 
      return domain; 
     } 
     public void setDomain(Domain domain) { 
      this.domain = domain; 
     } 
    } 

    @ModelAttribute("command") 
    public FormBean getCommand() { 
     return new FormBean(); 
    } 

    @InitBinder 
    public void initBinder(WebDataBinder binder, WebRequest request) { 
     // this custom editor knows how to load a Domain object from the domainValue string 
     // if it fails to convert, it can throw an exception, which will result in 
     // an error being logged against the "domain" field 
     binder.registerCustomEditor(Domain.class, "domain", new DomainLookupEditor(domainService)); 
    } 

    @RequestMapping(method=RequestMethod.POST) 
    public String selectedDomain(@ModelAttribute("command") FormBean command, 
             BindingResult result, 
             Model model, 
             HttpServletRequest request) { 
     if (result.hasErrors()) { 
      return "sojoView"; 
     } 
     Domain domain = command.getDomain(); 
     List<User> users = domain.getUsers(); 
     model.addAttribute("users", users); 
     return "sojoView"; 
    } 
} 

जारी करने के लिए की तरह somethign कर सकते हैं AJAX अनुरोध, आप jquery AJAXForm मॉड्यूल का उपयोग कर सकते हैं। आप यह मानते हुए आईडी "selectDomainForm" के साथ एक रूप है आप js जरूरत है कुछ इस तरह दिखता है कि:

function selectDomainSuccessHandler(json) { 
    // it is possible to send back a 200 response after failing to process the request, 
    // in which case, the sojoView will have set success=false in the json 
    if (json.success == true) { 
     // parse json here and render it into html in your document 
    } else { 
     // get field error and global error from json and present to user 
    } 
} 

function(selectDomainErrorHandler(xhr, returnCode) { 
    // do something based on the return code 
} 

var options = { 
    success: selectDomainSuccessHandler, 
    error: selectDomainErrorHandler, 
    dataType: 'json' 
}; 

$('selectDomainForm').ajaxForm(options); 

आपको कैसे बजाय पोस्ट हो और हड़पने भेजने के लिए करने के लिए जानने के लिए ajaxForm मॉड्यूल के लिए प्रलेखन अप गूगल कर सकते हैं केवल कुछ फ़ील्ड और उन्हें एक ऐसे यूआरएल पर भेजें जो फॉर्म का इच्छित यूआरएल नहीं है।

पृष्ठ में उपयोगकर्ताओं की सूची प्रदर्शित करने के लिए, आपके पास "userList" जैसी आईडी के साथ आपके कोड में एक div होगा और आप प्रत्येक उपयोगकर्ता के लिए HTML बनाकर लौट आए जेसन में उपयोगकर्ताओं को फिर से सक्रिय कर सकते हैं। बस उस उपयोगकर्ता को "userList" div में जोड़ें और यह ब्राउज़र में दिखाई देगा।

Answer 2

URL के लिए नियंत्रक को परिभाषित करें

आप POST विधि का उपयोग करना चाहते हैं:

content.load('URL(.)or(#)sectionToLoad', {}, function(event) { 
... 
}); 

या, आप GET पद्धति का उपयोग करना चाहते हैं:

content.load('URL(.)or(#)sectionToLoad', function(event) { 
... 
}); 

यह कॉल .click या .submit

जैसे फ़ंक्शन के साथ

और यह

है