京东网站的公司全名,面签拍照 网站备案,个体工商户注册流程,西宁做网站的公司AJAX 简介
AJAX 是一种在无需重新加载整个网页的情况下#xff0c;能够更新部分网页的技术。其实AJAX就可以理解为就是JS。通过AJAX也就实现了前后端分离#xff0c;前端只写页面#xff0c;后端生成数据#xff01; 现在开始通过实例学习#xff1a;
1--GET传参
!…AJAX 简介
AJAX 是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。其实AJAX就可以理解为就是JS。通过AJAX也就实现了前后端分离前端只写页面后端生成数据 现在开始通过实例学习
1--GET传参
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
scriptfunction ajax2() {//0:获取input内容let user document.querySelector(.user).value;let pwd document.querySelector(.pwd).value;//1:创建ajax对象let xmlHttpRequest new XMLHttpRequest();//2:配置后端请求--get请求参数用和来传参数xmlHttpRequest.open(get, /stage1_war_exploded/ajax2?useruserpwdpwd, true)//3:发送请求xmlHttpRequest.send();//4:监听数据是否请求成功xmlHttpRequest.onreadystatechange function () {//5:如果服务器成功解析数据则readyState4,如果后端成功返回数据则state200if (xmlHttpRequest.readyState 4 xmlHttpRequest.status 200) {//6:获取后端数据let data xmlHttpRequest.responseText;//7:将数据插入前端页面document.getElementById(show).innerHTML data;}}}/script
body
div idshow styleborder: 1px red; width: 200px;height: 100px
/div
账号input typetext classuserbr
密码input typetext classpwdbr
button onclickajax2()提交/button//当点击按钮后调用ajax2()方法
/body
/html
2--后端生产数据
WebServlet(/ajax2)
public class ajax2 extends HttpServlet {Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置编码req.setCharacterEncoding(utf-8);resp.setContentType(text/html;charsetutf-8);//后端获取get方式的参数就用getParameterString user req.getParameter(user);String pwd req.getParameter(pwd);PrintWriter writer resp.getWriter();//将后端数据返回给前端writer.write(后端数据来了user-----pwd);}
}3--POST传参
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
scriptfunction ajax2() {//0:获取input内容let user document.querySelector(.user).value;let pwd document.querySelector(.pwd).value;//1:创建ajax对象let xmlHttpRequest new XMLHttpRequest();//2:配置后端请求xmlHttpRequest.open(post, /stage1_war_exploded/ajax2, true);//3:发送请求//3_1:post请求必须设置请求头--一个单词都不能错固定写法xmlHttpRequest.setRequestHeader(Content-Type, application/x-www-form-urlencoded);//3_2:发送请求和post参数———————其他地方和get相同xmlHttpRequest.send(user user pwd pwd);//4:监听数据是否请求成功xmlHttpRequest.onreadystatechange function () {//5:如果服务器成功解析数据则readyState4,如果后端成功返回数据则state200if (xmlHttpRequest.readyState 4 xmlHttpRequest.status 200) {//6:获取后端数据let data xmlHttpRequest.responseText;//7:将数据插入前端页面document.getElementById(show).innerHTML data;}}}
/script
body
div idshow styleborder: 1px red; width: 200px;height: 100px
/div
账号input typetext classuserbr
密码input typetext classpwdbr
button onclickajax2()提交/button
/body
/html
