用JQuery来写Ajax
下面是用Javascript来写的ajax代码<script type="text/javascript">var xmlHttpRequest = null;function ajaxSubmit() {if (window.ActiveXObject) {xmlHttpRequestnew ActiveXObject("Microsoft.XMLHTTP");} else if (window.XMLHttpRequest) {xmlHttpRequest = new XMLHttpRequest();}if (xmlHttpRequest != null) {var v1 = document.getElementById("add1").value;var v2 = document.getElementById("add2").value;xmlHttpRequest.open("POST", "jisuan", true);xmlHttpRequest.onreadystatechange = ajaxCallback;xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded")xmlHttpRequest.send("add1=" + v1 + "&add2=" + v2);}}function ajaxCallback() {if (xmlHttpRequest.readyState == 4) {if (xmlHttpRequest.status == 200) {var responseText = xmlHttpRequest.responseText;//alert(responseText);document.getElementById("results").value = responseText;}}}</script>
用JQuery来写的话
第一种写法：
<script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript"> $(function(){ $("#jia").click(function() { $.ajax({ type:"POST", url:"../suanfa", dateType:"html", data:{'add1':$("#add1").val(),'add2':$("#add2").val()}, success:function(returnedData) { $("#result").val(returnedData); } }); }); }); </script>
第二种写法：
<script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript"> $(function(){ $("#jia").click(function() { $.post ("../suanfa",{add1:$("#add1").val(),add2:$("#add2").val()}, function(returnedData) { $("#result").val(returnedData); } ); }); }); </script>
body里的是：
<input type="text" id="add1"/> + <input type="text" id="add2"/> <input type="button" value="=" id="jia"/> <input type="text" id="result"/>
servlet里的处理
package com.niit.test;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class Suanfa extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {int num1=Integer.parseInt(request.getParameter("add1"));int num2=Integer.parseInt(request.getParameter("add2"));int result=num1+num2;response.setHeader("pragma", "no-cache");response.setHeader("cache-control", "no-cache");response.setContentType("text/html");PrintWriter out=response.getWriter();out.print(result);out.flush();out.close();}}
第二种写法在学完JQuery后用的最多。
页:
[1]