当前位置： 首页 > news >正文

烟台市芝罘区建设局网站/单页网站模板

news 2025/6/30 7:26:01
烟台市芝罘区建设局网站,单页网站模板,建设网站宣传,法院举报网站建设的要求Ajax 介绍 Ajax（Asynchronous javaScript XML）是一种异步处理数据的技术，用于创建快速动态网页，通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况…

Ajax

介绍

Ajax（Asynchronous javaScript XML）是一种异步处理数据的技术，用于创建快速动态网页，通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，网页的某部分进行更新。

使用场景

  • 注册时，写完用户名，提示该用户名是否存在，可否注册
  • 更新时，在输入完用户id后，下方的个人信息内容直接自动补全

jquery—ajax语法

get请求方式：

$.get(url,data,function(data){})
发送get请求
参数1: url 是后台服务器地址
参数2: data 是发送到后台服务器的数据,是map格式,形如 { name: "John", time: "2pm" }
参数3: function 函数,是回调函数,是请求完成后执行的函数,参数data就是后台返回的数据

post请求：

$.post(url,data,function(data){})
发送post请求
参数1: url 是后台服务器地址
参数2: data 是发送到后台服务器的数据,是map格式,形如 { name: "John", time: "2pm" }
参数3: function 函数,是回调函数,是请求完成后执行的函数,参数data就是后台返回的数据

Ajax：

$.ajax()是综合应用,1) 可以随意指定请求方式2) 可以指定发送到后台的数据类型一般表单发送的数据,称作表单数据,形如name=admin&pwd=123456servlet后台使用req.getParameter()接收可以指定为json数据,形如{"name":"admin","pwd":"123456"}servlet后台使用字符流读取数据,拼接成json串                   3) 可以指定接收数据的格式
-------------------------------------                        $.ajax()是综合应用,1) 可以随意指定请求方式2) 可以指定发送到后台的数据类型一般表单发送的数据,称作表单数据,形如name=admin&pwd=123456servlet后台使用req.getParameter()接收可以指定为json数据,形如{"name":"admin","pwd":"123456"}servlet后台使用字符流读取数据,拼接成json串                   3) 可以指定接收数据的格式
--------------------------------------------------------------------
$.ajax({url:"",  // 请求路径type:"get|post", // 指定请求方式,不写默认是getcontenType:"application/x-www-form-urlencoded", // 默认的,发送表单数据// "application/json" , 按json格式发送data:"name=admin&pwd=123456", // 发送到后台的数据// 如果是指定是json格式,此处应该{"name":"admin","pwd":"123456"}success:function(data){  // 请求成功的回调,data就是后台返回的数据},error:function(){  // 请求异常的回调函数alter("服务器正忙,稍后再试");}
})
示例：

前端：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/jquery-2.1.0.js"></script>
</head>
<body>
<button onclick="showAjaxGet()">$.get</button> <br>
<button onclick="showAjaxPost()">$.post</button> <br>
<button onclick="showAjax()">$.ajax</button> <br>
<script>function showAjaxGet() {// $.get(url,data,callback)$.get("/show/get",{"username":"tom"},function (ret) {console.log(ret)console.log(ret.code)console.log(ret.msg)})}function showAjaxPost() {$.post("/show/post",{"password":"123456"},function (ret) {console.log(ret)console.log(ret.code)console.log(ret.msg)})}/*** ajax发送get请求时,数据可以是字符串类型,也可以是object(即json类型)*  后台servlet都可以使用getParameter来接收* ajax发送post请求,且数据类型是json时,且指定数据类型是 contentType:"application/json",,*     此时后台无法使用getParameter来接收* ajax发送post请求,且数据类型是字符串时,后台可以用getParameter来接收*/function showAjax() {$.ajax({url:"/show/ajax",type:"post",contentType:"application/json",//data: "username=cat&password=123456",data:{"username":"tomcat","password":"666666"},success:function (ret){console.log(ret)},error:function (){alert("服务器正忙")}})}</script>
</body>
</html>

后端：

get：

@WebServlet("/show/get")
public class ShowAjaxGetServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username = req.getParameter("username");System.out.println("username = " + username);// 响应,响应给ajax回调也是json数据resp.setContentType("application/json;charset=utf-8");PrintWriter out = resp.getWriter( );out.write("{\"code\":200,\"msg\":\"请求成功\"}");}
}

post：

@WebServlet("/show/post")
public class ShowAjaxPostServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String password = req.getParameter("password");System.out.println("password = " + password);// 响应,响应给ajax回调也是json数据resp.setContentType("application/json;charset=utf-8");PrintWriter out = resp.getWriter( );out.write("{\"code\":200,\"msg\":\"请求成功\"}");}
}

ajax：

@WebServlet("/show/ajax")
public class ShowAjaxServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("ShowAjaxServlet-doGet" );String username = req.getParameter("username");System.out.println("username = " + username);String password = req.getParameter("password");System.out.println("password = " + password );// 响应,响应给ajax回调也是json数据resp.setContentType("application/json;charset=utf-8");PrintWriter out = resp.getWriter( );out.write("{\"code\":200,\"msg\":\"请求成功-ajax\"}");}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println("ShowAjaxServlet-doPost" );String username = req.getParameter("username");System.out.println("username = " + username);String password = req.getParameter("password");System.out.println("password = " + password );System.out.println(1/0 );// 响应,响应给ajax回调也是json数据resp.setContentType("application/json;charset=utf-8");PrintWriter out = resp.getWriter( );out.write("{\"code\":200,\"msg\":\"请求成功-ajax\"}");}
}

案例一：

  • 输入框绑定失去焦点事件
  • 发送ajax请求,携带输入的用户名,到后台
  • 后台servlet接收请求
  • servlet传递数据到service,
  • serice传递数据到dao层
  • dao层根据参数查询数据
  • 将结果返回给service
  • service返回给servlet
  • servlet将接收到service返回数据响应给ajax的回调函数
  • ajax回调接收到返回的数据,判断
  • 是否可以注册,做出样式改变

数据准备：

CREATE TABLE `user` (`id` int(11) NOT NULL AUTO_INCREMENT,`username` varchar(255) DEFAULT NULL,`password` varchar(255) DEFAULT NULL,`birthday` date DEFAULT NULL,`phone` varchar(255) DEFAULT NULL,`address` varchar(255) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册</title>
</head>
<body>用户名<input id="input-1" type="text" name="username"> <span id="span-1"></span><script src="/day42/js/jquery-3.6.0.js" type="text/javascript"></script>
<script type="text/javascript">$("#input-1").blur(function (){var name = $("#input-1").val();// $.get 发送到后台的数据,其实表单数据$.get("/day42/check/user",{username:name},function (data){// console.log(data);// 后台返回的是json数据if (data.code == 200) {$("#span-1").text(data.msg)$("#span-1").css("color","green")} else {$("#span-1").text(data.msg)$("#span-1").css("color","red")}})})</script>
</body>
</html>

后端：

@WebServlet("/check/user")
public class CheckUserServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 接收数据String username = req.getParameter("username");System.out.println("CheckUserServlet.doGet() username = " + username );// 传递数据给serviceUserServiceImpl userService = new UserServiceImpl( );User user = userService.findUserByUsename(username);System.out.println("CheckUserServlet.doGet() user = " + user );// 设置响应的内容类型为json格式,如果不设置的话返回给前端的是JSON字符串// 前端需要使用JSON.parse解析为json对象才能使用resp.setContentType("application/json;charset=utf-8");// 响应json数据,拼接jsonPrintWriter out = resp.getWriter( );// 判断if (user != null) { // 已存在,不能再注册// 响应json数据out.write("{\"code\":500,\"msg\":\"已经存在,不能注册\"}");} else { // 不存在,可以注册out.write("{\"code\":200,\"msg\":\"可以注册\"}");}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req,resp);}
}

userService&UserServiceImpl

public interface UserService {User findUserByUsename(String username);}public class UserServiceImpl  implements UserService {@Overridepublic User findUserByUsename(String username) {// 调用daoUserDaoImpl userDao = new UserDaoImpl( );User user = userDao.findUserByUsername(username);return user;}
}

UserDao&UserDaoImpl

public interface UserDao {User findUserByUsername(String username);}public class UserDaoImpl implements UserDao {@Overridepublic User findUserByUsername(String username) {// 加载驱动,获得连接Connection conn = DBUtil.getConnection( );PreparedStatement ps = null;ResultSet rs = null;User user = null;// 编写sqlString sql = "select * from user where username = ?";try {// 预处理ps = conn.prepareStatement(sql);// 占位符赋值ps.setString(1, username);// 执行,返回结果集rs = ps.executeQuery( );if (rs.next( )) {user = new User( );int id = rs.getInt("id");String uname = rs.getString("username");String pwd = rs.getString("password");String phone = rs.getString("phone");String address = rs.getString("address");Date birthday = rs.getDate("birthday");user.setId(id);user.setUsername(uname);user.setPassword(pwd);user.setAddress(address);user.setPhone(phone);user.setBirthday(birthday);}} catch (Exception e) {e.printStackTrace( );} finally {DBUtil.closeAll(rs, ps, conn);}return user;}
}
$.post实现

只需将方法该表为$.post

$.ajax实现

以表单的形式发送数据

前端：

// 发$.ajax请求,发送表单形式发送
$.ajax({url:"/day42/check/user",type:"get",data:"username="+name,  // 表单的形式的是数据success:function(data){if (data.code == 200) {$("#span-1").text(data.msg)$("#span-1").css("color", "green")} else {$("#span-1").text(data.msg)$("#span-1").css("color", "red")}},error:function (){alert("服务器正忙!")}})

后端：

@WebServlet("/check/user")
public class CheckUserServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 接收数据String username = req.getParameter("username");System.out.println("CheckUserServlet.doGet() username = " + username );// 传递数据给serviceUserServiceImpl userService = new UserServiceImpl( );User user = userService.findUserByUsename(username);System.out.println("CheckUserServlet.doGet() user = " + user );// 设置响应的内容类型为json格式resp.setContentType("application/json;charset=utf-8");// 响应json数据,拼接jsonPrintWriter out = resp.getWriter( );// 判断if (user != null) { // 已存在,不能再注册// 响应json数据out.write("{\"code\":500,\"msg\":\"已经存在,不能注册\"}");} else { // 不存在,可以注册out.write("{\"code\":200,\"msg\":\"可以注册\"}");}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req,resp);}
}

前端：

        $.ajax({url:"/day42/check/user",type:"post",// 发送json数据,需要使用post,get形式发送,后台会当做表单数据接收!!data: {"username":name},  // json形式的是数据contentType:"application/json", // 需要指定发送的数据类型为json,默认是application/x-www-form-urlencodedsuccess:function(data){// 如果不行的话,查看一下返回的data是否是json字符串?如果是要解析为json对象 console.log(" $.ajax.json")if (data.code == 200) {$("#span-1").text(data.msg)$("#span-1").css("color", "green")} else {$("#span-1").text(data.msg)$("#span-1").css("color", "red")}},error:function (){alert("服务器正忙!")}})

使用$.ajax以get请求发送json数据，后台servlet可以使用req.getParameter(“”)来接收数据

使用$.ajax以post请求发送json数据时，后台servelt不可以使用req.getParameter(“”)来接收数据，应该使用输入流来读取json字符串

后端：

@WebServlet("/check/user")
public class CheckUserServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 接收数据,当发送json数据且以get方法时,用这种方法// String username = req.getParameter("username");// System.out.println("CheckUserServlet.doGet() username = " + username );/*** 前端发送的json数据,且是post,就不能使用req.getParameter("username");接数据* 可以使用请求对象获得一个输入流,从输入流获得json字符串*/// 获得输入流BufferedReader reader = req.getReader( );// 准备拼接字符串StringBuilder sb = new StringBuilder( );String line = null;while((line = reader.readLine()) != null) {sb.append(line);}System.out.println("json字符串: " + sb.toString() );// 获得拆分后的数组 ["username","admin"]String[] split = sb.toString( ).split("=");String username = "";if (split[0].equals("username")) {username = split[1];}// 传递数据给serviceUserServiceImpl userService = new UserServiceImpl( );User user = userService.findUserByUsename(username);System.out.println("CheckUserServlet.doGet() user = " + user );// 设置响应的内容类型为json格式resp.setContentType("application/json;charset=utf-8");// 响应json数据,拼接jsonPrintWriter out = resp.getWriter( );// 判断if (user != null) { // 已存在,不能再注册// 响应json数据out.write("{\"code\":500,\"msg\":\"已经存在,不能注册\"}");} else { // 不存在,可以注册out.write("{\"code\":200,\"msg\":\"可以注册\"}");}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req,resp);}
}

案例二：

需求

需求:

​ 更新时,在输入完用户id后,下方的个人信息内容直接自动补全

技术: html,ajax,servlet,jdbc

具体思路:

  • 创建页面,创建一个表单输入框
  • 给表单绑定失去焦点事件
  • 获得输入框的值,发送ajax请求,发送数据
  • 后台servlet接收
  • 传递到service
  • service传递到dao层
  • dao层查询数据
  • 返回给service
  • service返回给servlet
  • servlet将数据响应给前端
    • 此处需要将全部用户信息拼接成json字符串
  • ajax回调函数,获得数据
  • 获得输入框对象,给赋值

前端：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>编辑</title>
</head>
<body>
<table border="2" align="center"><tr><td>编号</td><td><input  id="input-1" type="text" name="id"></td></tr><tr><td>用户名</td><td><input type="text" name="username"></td></tr><tr><td>密码</td><td><input type="text" name="password"></td></tr><tr><td>生日</td><td><input type="date" name="birthday"></td></tr><tr><td>手机</td><td><input type="text" name="phone"></td></tr><tr><td>地址</td><td><input type="text" name="address"></td></tr>
</table>
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
<script type="text/javascript">$("#input-1").blur(function (){var id =  $("#input-1").val();$.ajax({url:"/day42/find/user",type:"get",data:"id="+id,  // 发送表单数据success:function (data){// 如果不行的话,查看一下返回的data是否是json字符串?如果是要解析为json对象 $("input[name=username]").val("")$("input[name=password]").val("")$("input[name=birthday]").val("")$("input[name=phone]").val("")$("input[name=address]").val("")if (data.status == 200) {var user = data.data;$("input[name=username]").val(user.username)$("input[name=password]").val(user.password)$("input[name=birthday]").val(user.birthday)$("input[name=phone]").val(user.phone)$("input[name=address]").val(user.address)}else{alert(data.msg)}}})})
</script>
</body>
</html>

后端：

@WebServlet("/find/user")
public class UserFindServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 接收数据String id = req.getParameter("id");System.out.println("UserFindServlet.doGet id = " +id );// serviceUserFindService userFindService = new UserFindServiceImpl();User user = userFindService.findUserById(id);resp.setContentType("application/json;charset=utf-8");PrintWriter out = resp.getWriter( );if (user != null) {SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");String date = sdf.format(user.getBirthday( ));out.write("{\"status\":200,\"msg\":\"查询成功\",\"data\":{\"id\":"+user.getId()+",\"username\":\""+user.getUsername()+"\",\"password\":\""+user.getPassword()+"\",\"birthday\":\""+date+"\",\"phone\":\""+user.getPhone()+"\",\"address\":\""+user.getAddress()+"\"}}");} else {out.write("{\"status\":500,\"msg\":\"查无此人\"}");}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req,resp);}
}

UserFindService&UserFindServiceImpl

public interface UserFindService {User findUserById(String id);
}
public class UserFindServiceImpl implements UserFindService {@Overridepublic User findUserById(String id) {// daoUserDaoImpl userDao = new UserDaoImpl( );User user = userDao.findUserById(id);return user;}
}

UserDao&UserDaoImpl

public interface UserDao {User findUserByUsername(String username);User findUserById(String id);
}public User findUserById(String id) {// 加载驱动,获得连接Connection conn = DBUtil.getConnection( );PreparedStatement ps = null;ResultSet rs = null;User user = null;// 编写sqlString sql = "select * from user where id = ?";try {// 预处理ps = conn.prepareStatement(sql);// 占位符赋值ps.setInt(1, Integer.parseInt(id));// 执行,返回结果集rs = ps.executeQuery( );if (rs.next( )) {user = new User( );int uid = rs.getInt("id");String uname = rs.getString("username");String pwd = rs.getString("password");String phone = rs.getString("phone");String address = rs.getString("address");Date birthday = rs.getDate("birthday");user.setId(uid);user.setUsername(uname);user.setPassword(pwd);user.setAddress(address);user.setPhone(phone);user.setBirthday(birthday);}} catch (Exception e) {e.printStackTrace( );} finally {DBUtil.closeAll(rs, ps, conn);}return user;}
http://www.jmfq.cn/news/4892095.html

相关文章：

  • 做设计在哪个网站找图片/seo资讯推推蛙
  • 自己能不能做个网站/免费crm客户管理系统
  • 红色简约的手机社区类网站html5响应式模板下载/google搜索引擎官网
  • 有做销售产品的网站有哪些内容/如何做到精准客户推广
  • 手机制作图片的软件免费/济源新站seo关键词排名推广
  • 给网站做压力测试/百度seo怎么提高排名
  • 自己搭建云服务平台/英语seo
  • 电子商城网站建设方案/电商代运营公司排名
  • 重庆公司网站建设价格/百度推广视频
  • 三五互联网站管理登录地址是多少/steam交易链接怎么改
  • 赤峰网站策划/深圳sem竞价托管
  • 怎么做代购彩票网站/济南网站优化公司排名
  • 湟源县wap网站建设公司/西安百度seo
  • 网站建设实训报告心得/网站外链是什么
  • 网站设计师/关键词推广
  • 贵州 网站建设/百度竞价广告怎么投放
  • 做seo需要哪些知识/安全优化大师下载
  • 铜山区建设局网站/农大南路网络营销推广优化
  • 十大SEO网站外链建设误区/上海网站外包
  • 手机低价购买网站/广告策划公司
  • 找人做网站维护多少钱/现在有哪些培训学校
  • 介绍国外的网站有什么不同/广州网络推广万企在线
  • wordpress feed 缩略图/谷歌优化工具
  • 网站建设费用包括/2022年适合小学生的新闻
  • xp花生壳做网站/国外免费网站服务器
  • 北京做网站的大公司/百度网盘服务电话6988
  • 网站投票怎么做/seo关键词优化外包公司
  • 做网站利润/aso优化榜单
  • 建英文网站费用/北京互联网公司
  • 网站开发地图板块浮动/新媒体运营培训课程