初始Ajax学习笔记
前端:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--引入jquery文件--> <script src="js/jquery-3.2.1.js" type="text/javascript"></script> </head> <body> <div style="margin:100px;height:100px"> <input> </div> <script type="text/javascript"> $("input:eq(0)").on('change',function(){ //获取input中的值 var a = $(this).val(); var user = {"name":a, "age": 18, "tel": "13611111111" }; //将这个值传递到java后台 $.ajax({ //通过jquery调用ajax方法,触发ajax请求 url:'/web10/testAjax1', //url表示请求会发送到哪个后端地址 //data:'value='+a, //通过data封装参数 data: user,//通过对象传参 type:'get', //type表示发送到后端的请求类型:Get、Post、Put、Delete等等 dataType:'text', //dataType表示服务端响应数据的类型:HTML、text、json等 success:function(msg){ //success表示请求发送成功之后的回调函数 //msg表示服务端发送到前端的数据 alert(msg); }, error:function(){ //error,表示程序调用有误 alert('错误'); } }); }); </script> </body> </html>
后台:
package com.zzb.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/testAjax1") public class TestAjax1 extends HttpServlet{ private static final long serialVersionUID = 3377241767636882169L; @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name = request.getParameter("name"); String age = request.getParameter("age"); String tel = request.getParameter("tel"); System.out.println("ajaxÇëÇóµ½´ï:"+name+":"+age+":"+tel); PrintWriter out = response.getWriter(); out.write("success:"+name); out.close(); } }