यह मेरे पैमाने
यह वास्तव में संदर्भ और कार्यात्मक जरूरतों पर निर्भर करता है के लिए बहुत बड़ा लगता है। हालांकि यह बहुत सरल और मामूली है। यह और अधिक लगता है कि यह आपके लिए "बहुत अधिक जानकारी" है और आपको वास्तव में अलग-अलग अवधारणाओं (HTTP, HTML, CSS, JS, JS, Java, JSP, Servlet, Ajax, JSON, आदि) व्यक्तिगत रूप से सीखने की आवश्यकता है ताकि आप बड़ी तस्वीर (उन सभी भाषाओं/तकनीकों का योग) अधिक स्पष्ट हो जाता है। आपको this answer उपयोगी हो सकता है।
वैसे भी, इस तरीके से अजाक्स के बिना सिर्फ JSP/Servlet के साथ यह कर सकता है:
calculator.jsp:
<form id="calculator" action="calculator" method="post">
<p>
<input name="left">
<input name="right">
<input type="submit" value="add">
</p>
<p>Result: <span id="result">${sum}</span></p>
</form>
CalculatorServlet साथ जो /calculator के url-pattern पर मैप किया गया है:
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Integer left = Integer.valueOf(request.getParameter("left"));
Integer right = Integer.valueOf(request.getParameter("right"));
Integer sum = left + right;
request.setAttribute("sum", sum); // It'll be available as ${sum}.
request.getRequestDispatcher("calculator.jsp").forward(request, response); // Redisplay JSP.
}
अजाक्सिका बनाना काम करने के लिए सामान भी मुश्किल नहीं है। यह JSP के एचटीएमएल <head> अंदर निम्नलिखित जे एस सहित की बात है (सही करने के लिए स्क्रॉल करें कोड टिप्पणियों को देखने के लिए जो बताता है कि हर एक लाइन करता है):
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() { // When the HTML DOM is ready loading, then execute the following function...
$('#calculator').submit(function() { // Locate HTML element with ID "calculator" and execute the following function on its "submit" event...
$form = $(this); // Wrap the form in a jQuery object first (so that special functions are available).
$.post($form.attr('action'), $form.serialize(), function(responseText) { // Execute Ajax POST request on URL as set in <form action> with all input values of the form as parameters and execute the following function with Ajax response text...
$('#result').text(responseText); // Locate HTML element with ID "result" and set its text content with responseText.
});
return false; // Prevent execution of the synchronous (default) submit action of the form.
});
});
</script>
और doPost के अंतिम दो पंक्तियों को बदलने इस प्रकार है:
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(String.valueOf(sum));
तुम भी यह एक सशर्त जांच कर सकते हैं ताकि आपके प्रपत्र अभी भी मामला है कि उपयोगकर्ता जे एस अक्षम है के लिए काम करता है:
if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) {
// Ajax request.
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(String.valueOf(sum));
} else {
// Normal request.
request.setAttribute("sum", sum);
request.getRequestDispatcher("calculator.jsp").forward(request, response);
}
है आप किसी भी सर्वलेट्स के बिना इसे बना सकते हैं। केवल एचटीएमएल + जावास्क्रिप्ट के साथ। एक और तरीका - सर्वर पर गणना करें। पृष्ठ रीलोडिंग से बचने के लिए यहां आपको अजाक्स की आवश्यकता है। जिस तरह से आप पसंद करते हैं और आपको समस्याएं कहां मिलती हैं? –