ajax的使用
| 解释 | |
|---|---|
| url | 访问服务器的地址 |
| data | 发送给服务器的数据，有两种格式： 1. 键=值&键=值 2. {键:值, 键:值} |
| callback | 指定回调函数，通常使用匿名函数。注：回调函数的参数用来接收服务器返回的数据 |
| type | 指定服务器返回的数据类型 取值可以是 xml, html, script, json, text, _default等 |
浏览器端代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3.0前使用get</title> <script src="js/jquery-3.3.1.js"></script> </head> <body> <h2>用户注册</h2> 用户名： <input type="text" name="user" id="user"> <span id="info"></span> </body> <script type="text/javascript"> //文本框失去焦点事件 $("#user").blur(function () { /* 使用$.get方法后台访问服务器 1. 访问地址 2. 发送给服务器的数据 3. 回调函数：它的参数就是服务器返回的数据 4. 服务器返回的数据类型 */ let data = "user=" + $(this).val(); $.get("demo1",data, function (text) { //把结果显示在span中 $("#info").text(text); },"text"); }); </script> </html>
服务器代码
package com.yblue.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; @WebServlet("/demo1") public class Demo1UserExistsServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置响应内容为纯文本，表示是纯文本：标签不起作用 response.setContentType("text/plain;charset=utf-8"); PrintWriter out = response.getWriter(); //获取浏览器请求的方式 String method = request.getMethod(); System.out.println("请求方式是：" + method); //1.获取用户的名字 String user = request.getParameter("user"); //在jquery中post请求也没有乱码，jquery已经处理过了 System.out.println("名字：" + user); //2.判断用户名是否存在(这里暂时不访问数据库) if ("yblue".equalsIgnoreCase(user)) { out.print("用户名已经存在"); } //3.以纯文本的方式输出查询的结果 else { out.print("恭喜，可以注册"); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } }
| 解释 | |
|---|---|
| url | 访问服务器地址 |
| async | 同步或异步请求，默认是true异步 |
| method | 请求的方式，GET或POST，在旧版本中也叫type |
| data | 提交给服务器的数据，有以下两种格式： 1. 键=值&键=值 2. {键:值, 键:值} |
| dataType | 服务器返回的数据类型 取值可以是 xml, html, script, json, text, _default等 |
| success | 服务器正常响应的回调函数，它的参数就是服务器返回的数据 |
| error | 服务器出现异常的时候回调函数，它的参数就是XMLHttpRequest对象 |
浏览器端代码(服务器端省略类似上面)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>ajxa的使用</title> <!--导入jquery--> <script src="js/jquery-3.3.1.js"></script> </head> <body> <h2>用户登录</h2> <!--没有action和method属性，因为是后台异步提交--> <form id="loginForm"> <table> <tr> <td>用户名</td> <td><input type="text" name="username" id="username"/></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password" id="password"/></td> </tr> <tr> <!--登录按钮不是一个提交按钮--> <td colspan="2" align="center"><input type="button" value="登录" id="btnLogin"/></td> </tr> </table> </form> <script type="text/javascript"> //登录按钮的点击事件 $("#btnLogin").click(function () { //获取用户名和密码 //JQ表单对象.serialize() 将整个表单中所有的数据封装成了一个查询字符串 let param = $("#loginForm").serialize(); alert("提交给服务器的数据：" + param); //发送请求给服务器 $.ajax({ url:"demo1", //访问服务器的地址 //async: false, //默认是true表示异步，设置为false表示同步 //method: "post", //提交的方式，默认是get。post方法汉字没有乱码 data: param, //发送的数据 success: function (result) { //正常响应的回调函数，参数是服务器返回的数据 //显示登录的结果 alert(result); }, error: function (request) { //服务器出现异常以后执行的回调函数，参数是XMLHttpRequest对象 alert("服务器端出现异常，状态码是：" + request.status); } }); /* 异步：先弹出这个对话框，再执行服务器返回的结果。 同步：先等服务器返回结果，再执行后面的代码 */ //alert("后续代码继续执行"); }); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>3.0后的get使用</title> <!--导入jquery--> <script src="js/jquery-3.3.1.js"></script> </head> <body> <h2>用户登录</h2> <!--没有action和method属性，因为是后台异步提交--> <form id="loginForm"> <table> <tr> <td>用户名</td> <td><input type="text" name="username" id="username"/></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password" id="password"/></td> </tr> <tr> <!--登录按钮不是一个提交按钮--> <td colspan="2" align="center"><input type="button" value="登录" id="btnLogin"/></td> </tr> </table> </form> <script type="text/javascript"> //登录按钮的点击事件 $("#btnLogin").click(function () { //JQ表单对象.serialize() 将整个表单中所有的数据封装成了一个查询字符串 let param = $("#loginForm").serialize(); //发送请求给服务器 $.post({ url:"demo1", //访问服务器的地址 //以参数为准 method: "get", //提交的方式，默认是get。post方法汉字没有乱码 data: param, //发送的数据 success: function (result) { //正常响应的回调函数，参数是服务器返回的数据 //显示登录的结果 alert(result); }, error: function (request) { //服务器出现异常以后执行的回调函数，参数是XMLHttpRequest对象 alert("服务器端出现异常，状态码是：" + request.status); } }); }); </script> </body> </html>
想看更多精彩内容，可以关注我的CSDN
