怎么在html中使用ajax请求数据类型,使用Servlet处理AJAX请求

使用Servlet处理AJAX请求

AJAX用于异步更新页面的局部内容。

ajax常用的请求数据类型

text    纯文本字符串

json    json数据

使用ajax获取text示例

此种方式常用于前端向后台查询实体的一个属性(字段)，比如查询总分。

前端页面

学号：

姓名：

查询成绩

$("#btn").click(function () {

$.ajax({

url:"servlet/HandlerServlet", //请求地址

type:"get", //请求方法

data:{"no":$("#no").val(),"name":$("#name").val()}, //要发送的数据,相当于表单提交的数据，json形式。

dataType:"text", //期待返回的数据类型，也可以理解为请求的数据类型

error:function () { //发生错误时的处理

},

success:function (data) { //成功时的处理。参数表示返回的数据

$("#score").text(data);

}

})

});

这里使用了jq提供的ajax方法，所以要用

json的key只能是字符串，标准写法要引，实际上不引也可以，会自动转换为字符串。

json的value可以是多种数据类型，如果是字符串，需要引起来。

后台

@WebServlet("/servlet/HandlerServlet")

public class HandlerServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doGet(request,response);

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

request.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=utf-8");

//获取ajax传递的参数，和获取表单数据的方式一样

String no=request.getParameter("no");

String name=request.getParameter("name");

//此处省略连接数据库查询，直接返回成绩

PrintWriter writer = response.getWriter();

writer.write(name+"同学，你的总分是：600");

}

}

说明

ajax请求的的url要和servlet配置的urlPatterns对应，这个地方很容易出错

servlet返回响应时，不管write()多少次，都只组成一个响应返回。

PrintWriter writer = response.getWriter();

writer.write("中国");

writer.write("北京");

PrintWriter writer = response.getWriter();

writer.write("中国北京");

这2种方式完全等效，浏览器接受到的都是“中国北京”，“中国”“北京”之间没有空格。

使用ajax获取json对象示例

此种方式常用于后台向前端传送一个实体|JavaBean(一个实体的多个字段)，比如查询一个学生的信息。

前端

学号：

查询学生信息

$("#btn").click(function () {

$.ajax({

url:"servlet/HandlerServlet",

type:"post",

data:{},

dataType:"json",

error:function () {

console.log("ajax请求数据失败！");

},

success: function (data) {

//浏览器把接受到的json数据作为js对象，可通过.调用属性

var info = "姓名：" + data.name + ",年龄：" + data.age + "，成绩：" + data.score;

$("#show").text(info);

console.log(data);

}

})

});