1. ajax函数 28
使用jquery的函数，实现ajax请求的处理。
没有jquery之前，使用XMLHttpRequest做ajax ， 有4个步骤。 jquery简化了ajax请求的处理。
1.1 使用三个函数可以实现ajax请求的处理。
1） $.ajax() : jquery中实现ajax的核心函数。
2） $.post() : 使用post方式做ajax请求。
3） $.get() : 使用get方式发送ajax请求。
$.post()和$.get() 他们在内部都是调用的 $.ajax()
1.2 介绍 $.ajax函数的使用 28
函数的参数表示请求的url， 请求的方式，参数值等信息。
$.ajax()参数是一个json的结构。
$.ajax()是jQuery中AJAX请求的核心方法，所有的其他方法都是在内部使用此方法。
语法：
$.ajax( { name:value, name:value, ... } )
说明：参数是json的数据，包含请求方式，数据，回调方法等
1.3 json结构的参数说明： 28-29
例如： $.ajax( { async:true ,
contentType:"application/json" ,
data: {name:"lisi",age:20 },
dataType:"json",
error:function(){
请求出现错误时，执行的函数
},
success:function( data ) {
// data 就是responseText, 是jquery处理后的数据。
},
url:"bmiAjax",
type:"get"
}
)
1)async:是一个boolean类型的值， 默认是true ，表示异步请求的。可以不写async这个配置项
xmlHttp.open(get,url,true),第三个参数一样的意思。
2)contentType: 一个字符串，表示从浏览器发送服务器的参数的类型。 可以不写。
例如你想表示请求的参数是json格式的， 可以写application/json
3)data: 可以是字符串，数组，json，表示请求的参数和参数值。 常用的是json格式的数据
4)dataType: 表示期望从服务器端返回的数据格式，可选的有： xml ， html ，text ，json
当我们使用$.ajax()发送请求时， 会把dataType的值发送给服务器， 那我们的servlet能够
读取到dataType的值，就知道你的浏览器需要的是 json或者xml的数据，那么服务器就可以
返回你需要的数据格式。
5)error: 一个function ，表示当请求发生错误时，执行的函数。
error:function() { 发生错误时执行 }
6)sucess:一个function , 请求成功了，从服务器端返回了数据，会执行success指定函数
之前使用XMLHttpRequest对象， 当readyState==4 && status==200的时候。
7)url:请求的地址
8)type:请求方式，get或者post， 不用区分大小写。 默认是get方式。
主要使用的是 url , data ,dataType, success .
代码在com.bjpowernode.ajax.servlet 30
AjaxRequest1
package com.bjpowernode.ajax.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
//演示jquery ajax 30
@WebServlet("/jqueryjson")
public class AjaxRequest1 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
String username = request.getParameter("username");
//{"uname" : "zhangsan"}
//响应一个json格式的字符串
response.getWriter().print("{\"uname\" : \""+username.toUpperCase()+"\"}");
}
}E:\java学习\jQuery\course\course5\web
jqueryajax
<!--演示jquery ajax 30-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示jquery ajax</title>
<script type="text/javascript" src="/ajax/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function (){
$("#btn").click(function (){
//获取文本框中输入的值
var username = $("#username").val()
//发送ajax请求
$.ajax({
url:"/ajax/jqueryjson",
data:{
"username":username
},
dataType:"json",
success:function (resp){
alert(resp.uname)
$("#div1").html(resp.uname)
}
})
})
})
</script>
</head>
<body>
<button id="btn">发送ajax get请求</button><br>
用户名:<input type="text" id="username"><br>
<div id="div1"></div>
</body>
</html>
2. $.get() 33
$.get() 方法使用 HTTP GET 请求从服务器加载数据。
语法：$.get(url,data,function(data,status,xhr),dataType)
url 必需。规定您需要请求的 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。
参数说明：
data - 包含来自请求的结果数据
status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的
类型：
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"json" - 以 JSON 运行响应，并以对象返回
3. $.post() 33
$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法：$.post(URL,data,function(data,status,xhr),dataType)
参数同$get()
