Ajax实现方式
1、$.ajax()
$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。
语法：
$.ajax( { name:value, name:value, … } )
属性：
| 属性 | 表示含义 |
|
async |
布尔类型值，表示请求是否异步，默认值是true。可以不写 |
| url | 表示请求的地址 |
|
type |
表示请求的类型 GET | POST |
| data |
表示发送给服务器的数据 格式有两种： 1、name=value1&age=value2 2、{name:value1, age:value2} |
| success |
请求成功，响应的回调函数
success:function (data) {
//data是回调时传回来的参数 |
| error | 请求失败，响应的回调函数 |
| dataType | 响应的数据类型 可以是JSON、test、xml，不过json比较使用多 |
案例代码演示：
html页面：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
function doAjax(){
$.ajax({
url:"bmiAjax",
type:"POST",
data:"name="+$("#name").val()+"&height="+$("#height").val()+"&weight="+$("#weight").val(),
success:function (data) {
alert(data);//这个是响应服务器的处理结果
$("#result").text(data);
},
error:function () {
alert("error！！！");
},
dataType:"json"
})
}
</script>
</head>
<body>
姓名: <input type="text"id="name" name="name"/><br/>
体重（kg）<input type="text" id="weight" name="weight"/><br/>
身高(米)<input type="text" id="height" name="height"/><br/>
<input type="button" value="计算BMI"onclick="doAjax()">
<div id="result">
</div>
</body>
</html>
servlet：
package cn.com.Ycy.Ajav;
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;
@WebServlet("/bmiAjax")
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
super.doGet(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setCharacterEncoding("utf-8");
String name = req.getParameter("name");
String weight = req.getParameter("weight");
String height = req.getParameter("height");
float w = Float.parseFloat(weight);
float h = Float.parseFloat(height);
float bmi = w / (h * h);
String msg = "";
if (bmi < 18.5) {
msg = ""+name+"比较廋";
} else if (bmi > 18.5 && bmi <= 23.9) {
msg = ""+name+"的bmi是正常的";
} else if (bmi <= 27 && bmi > 23.9) {
msg =""+name+"比较胖";
}else {
msg=""+name+"特别胖哦";
}
System.out.println(msg);
System.out.println("sbsb");
resp.getWriter().write(msg);
}
}
2、$.get()
| 属性 | 含义 |
|
url |
表示请求的地址 |
| data |
表示发送给服务器的数据 格式有两种： 1、name=value1&age=value2 2、{name:value1, age:value2} |
| callback | 请求成功，响应的回调函数 |
| dataType | 响应的数据类型 可以是JSON、test、xml，不过json比较使用多 |
更简化代码了
<script>
function doAjax(){
$.get("bmiAjax",{name:"ycy",height:1.75,weight:58},function (data) {
alert(data);
},"json")
}
</script>
3、$.post()
| 属性 | 含义 |
|
url |
表示请求的地址 |
| data |
表示发送给服务器的数据 格式有两种： 1、name=value1&age=value2 2、{name:value1, age:value2} |
| callback | 请求成功，响应的回调函数 |
| dataType | 响应的数据类型 可以是JSON、test、xml，不过json比较使用多 |
代码演示
<script>
function doAjax(){
$.post("bmiAjax",{name:"ycy",height:1.75,weight:58},function (data) {
alert(data);
},"json")
}
</script>
4、$.getJSON()
通过HTTP GET请求，请求载入JSON数据，请求方式和回调数据类型是固定的，请求方式是GET，数据返回是JSON格式
| 属性 | 含义 |
|
url |
表示请求的地址 |
| data |
表示发送给服务器的数据 格式有两种： 1、name=value1&age=value2 2、{name:value1, age:value2} |
| callback | 请求成功，响应的回调函数 |
$.get()和$.post()都是四个参数而这个只要三个参数即可,代码演示
<script>
function doAjax(){
$.getJSON("bmiAjax",{name:"ycy",height:1.75,weight:58},function (data) {
alert(data);
})
}
</script>
5、$(“#form1”).serialize()
可以把表单的所有参数都获取到，并以name=value&age=value2的形式拼接起来
$(“#form1”).serialize()需要都哪个表单绑定起来。
<script>
$("#btn").click(function(){
alter($("form1").serialize());
})
</script>