jquery ajax提交数据给后端,
大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学。
初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩。而JavaScript ajax写一大堆,看着都头痛。jquery ajax简单易懂容易学。
废话不多说,上教程~
新建一个Web项目,在\WebContent下新建一个index.jsp
新建之后不用慌,默认的jsp编码得改一下,我这边统一改成UTF-8:
搞定之后我们直接引入jquery的js文件,因为我们村通网络了,我就不想直接下载js了:
直接引入js的网上路径:
简简单单,明明白白,写两个输入框:
Insert title here点我提交//点击事件
其实这里我还是想直接截图的,但是害怕你们喷我“啥作者,只会发图片”。但是这里确实没啥好复制的。废话不多说,咱们继续。
写完这里之后,先不急着写js,咱们先把后台怎么接收的给写上。哈哈哈,又要发图片了
packagecom.tiezhu.action;importjava.io.IOException;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;
@WebServlet(name="LoginServlet",urlPatterns="/login")public class LoginServlet extendsHttpServlet{/****/
private static final long serialVersionUID = 1L;
@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throwsServletException, IOException {//TODO Auto-generated method stub
super.doGet(req, resp);
}
@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throwsServletException, IOException {
}
}
好了,搞定java类。咱们回到jsp去,快快,跟上队伍~
Insert title here点我提交
function btnConfirm(){//a标签中的点击事件
var userName=$("#userName").val();//通过id获取输入框中用户输入的值
var password=$("#password").val();
$.ajax({
type :'post',
url :'${pageContext.request.contextPath}/login',//这里的/login对应LoginServlet类中注解的urlPatterns="/login"
data:{'userName':userName,'password':password},
traditional :true,
async :false,
dataType:'json',
success :function(data){//成功的事件
alert("铁柱兄真帅");
},
error :function(data){//失败的事件
alert("你个衰仔!");
}
});
}
现在基本上就ok啦。ajax里的各种动作我就不一一解说啦,百度里面一大把哦。其实也不用知道是啥意思,能搞定用就好了。
现在我们再去LoginServlet类里去写接收
packagecom.tiezhu.action;importjava.io.IOException;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;
@WebServlet(name="LoginServlet",urlPatterns="/login")public class LoginServlet extendsHttpServlet{/****/
private static final long serialVersionUID = 1L;
@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throwsServletException, IOException {//TODO Auto-generated method stub
super.doGet(req, resp);
}
@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throwsServletException, IOException {
String userName=req.getParameter("userName");
String password=req.getParameter("password");
System.out.println("接收到前端传来的数据:userName="+userName+"password="+password);
}
}
这样基本上没啥毛病了,我们把项目跑起来试一下
OK,后端能正常接收到前端传来的值了。(那为啥还说我是个衰仔?)
因为后端只接收了值,但是没告诉ajax现在是啥情况。我们得返回点东西给ajax,告诉它我们这边一切正常。
resp.getWriter().write("666");随便返回点东西给前端,只要有返回,ajax就知道你还活着了。
再跑一次~
好了。本次就到这里啦。有什么不懂的欢迎评论区讨论~
本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
相关内容
暂无相关文章